<!DOCTYPE html>
<html>

<head>
    <title>黑森林</title>
    <base href="/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="darkreader-lock">
    <meta name="robots" content="noindex, nofollow" />
    <style>
        /* Put critical CSS here. The rest should go in stylesheets. */
        body {
            background-color: rgb(36, 36, 37);
        }
    </style>
    <link rel="preload" as="style" href="style.css">
    <link rel="manifest" crossorigin="use-credentials" href="manifest.json">
    <link href="webfonts/NotoSans/stylesheet.css" rel="stylesheet">
    <link href="webfonts/NotoSansMono/stylesheet.css" rel="stylesheet">
    <link href="css/fontawesome.min.css" rel="stylesheet">
    <link href="css/solid.min.css" rel="stylesheet">
    <link href="css/brands.min.css" rel="stylesheet">
    <link href="css/jquery-ui.min.css" rel="stylesheet">
    <link href="css/bright.min.css" rel="stylesheet">
    <link href="css/cropper.min.css" rel="stylesheet">
    <!-- <link href="css/toastr.min.css" rel="stylesheet"> -->
    <link href="css/select2.min.css" rel="stylesheet">
    <link href="css/Toast.css" rel="stylesheet">
    <link rel="apple-touch-icon" sizes="57x57" href="img/apple-icon-57x57.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="img/apple-icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="img/apple-icon-114x114.png" />
    <link rel="apple-touch-icon" sizes="144x144" href="img/apple-icon-144x144.png" />
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="css/st-tailwind.css">
    <link rel="stylesheet" type="text/css" href="css/rm-groups.css">
    <link rel="stylesheet" type="text/css" href="css/group-avatars.css">
    <link rel="stylesheet" type="text/css" href="css/toggle-dependent.css">
    <link rel="stylesheet" type="text/css" href="css/world-info.css">
    <link rel="stylesheet" type="text/css" href="css/extensions-panel.css">
    <link rel="stylesheet" type="text/css" href="css/select2-overrides.css">
    <link rel="stylesheet" type="text/css" href="css/mobile-styles.css">
    <link rel="stylesheet" type="text/css" href="css/user.css">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <!-- Scripts are loaded at the end of the body to improve page load speed -->

    <!-- <link rel="manifest" href="/manifest.json" />
    <title>React App</title>
    <script defer="defer" src="/static/js/main.4adac9c0.js"></script>
    <link href="/static/css/main.f855e6bc.css" rel="stylesheet"> -->
    <link rel="manifest" href="/manifest.json" />
    <!-- <script defer="defer" src="/main.js"></script> -->
    <!-- <link href="/static/css/main.css" rel="stylesheet">
    <link href="/assetc/css/main.css" rel="stylesheet"> -->
    <!-- <script type="module" crossorigin src="/static/index.js"></script>
    <link rel="stylesheet" crossorigin href="/static/index.css">
    <script type="module">import.meta.url;import("_").catch(()=>1);(async function*(){})().next();if(location.protocol!="file:"){window.__vite_is_modern_browser=true}</script>
    <script type="module">!function(){if(window.__vite_is_modern_browser)return;console.warn("vite: loading legacy chunks, syntax error above and the same error below should be ignored");var e=document.getElementById("vite-legacy-polyfill"),n=document.createElement("script");n.src=e.src,n.onload=function(){System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))},document.body.appendChild(n)}();</script> -->
</head>
<body >
  <div id="root" style="display: block;"></div>
  <div class="no-blur" id="jg_root"  style="display: none;">
    <div id="preloader"></div>
    <div id="bg_custom"></div>
    <div id="bg1"></div>
    <div id="character_context_menu" class="hidden">
        <ul>
            <li><button id="character_context_menu_favorite" data-i18n="Favorite">Favorite</button></li>
            <li><button id="character_context_menu_tag" data-i18n="Tag">Tag</button></li>
            <li><button id="character_context_menu_duplicate" data-i18n="Duplicate">Duplicate</button></li>
            <li><button id="character_context_menu_persona" data-i18n="Persona">Persona</button></li>
            <li><button id="character_context_menu_delete" data-i18n="Delete">Delete</button></li>
        </ul>
    </div>
    <!-- top bar central settings buttons -->
    <div id="top-bar">
    </div>
    <div id="top-settings-holder">
        <!-- background selection menu -->
        <div id="ai-config-button" class="drawer">
            <div class="drawer-toggle drawer-header">
                <div id="leftNavDrawerIcon" class="drawer-icon fa-solid fa-sliders  closedIcon" title="AI Response Configuration" data-i18n="[title]AI Response Configuration"></div>
            </div>
            <div id="left-nav-panel" class="drawer-content fillLeft closedDrawer">
                <div id="left-nav-panelheader" class="fa-solid fa-grip drag-grabber"></div>
                <div id="lm_button_panel_pin_div" title="Locked = AI Configuration panel will stay open" data-i18n="[title]AI Configuration panel will stay open">
                    <input type="checkbox" id="lm_button_panel_pin">
                    <label for="lm_button_panel_pin">
                        <div class="unchecked fa-solid fa-unlock right_menu_button"></div>
                        <div class="checked fa-solid fa-lock right_menu_button"></div>
                    </label>
                </div>
                <div id="clickSlidersTips" data-i18n="clickslidertips" class="toggle-description wide100p editable-slider-notification">
                    Click slider numbers to input manually.
                </div>
                <div id="labModeWarning" class="redWarningBG textAlignCenter displayNone" data-i18n="MAD LAB MODE ON">MAD LAB MODE ON</div>
                <a href="https://docs.sillytavern.app/usage/common-settings/" target="_blank" title="Documentation on sampling parameters." data-i18n="[title]Documentation on sampling parameters">
                    <span name="samplerHelpButton" class="note-link-span topRightInset fa-solid fa-circle-question"></span>
                </a>
                <div class="scrollableInner">
                    <div class="flex-container flexNoGap" id="ai_response_configuration">
                        <div id="respective-presets-block" class="width100p">
                            <div id="kobold_api-presets">
                                <h4 class="margin0"><span data-i18n="kobldpresets">Kobold Presets</span>
                                    <a href="https://docs.sillytavern.app/usage/api-connections/koboldai/" class="notes-link" target="_blank">
                                        <span class="fa-solid fa-circle-question note-link-span"></span>
                                    </a>
                                </h4>
                                <div class="flex-container flexNoGap">
                                    <select id="settings_preset" data-preset-manager-for="kobold" class="flex1 text_pole">
                                        <option value="gui" data-i18n="guikoboldaisettings">GUI KoboldAI Settings</option>
                                    </select>
                                    <div class="flex-container marginLeft5 ">
                                        <input type="file" hidden data-preset-manager-file="kobold" accept=".json, .settings">
                                        <i data-newbie-hidden data-preset-manager-update="kobold" class="menu_button fa-solid fa-save" title="Update current preset" data-i18n="[title]Update current preset"></i>
                                        <i data-newbie-hidden data-preset-manager-new="kobold" class="menu_button fa-solid fa-file-circle-plus" title="Save preset as" data-i18n="[title]Save preset as"></i>
                                        <i data-newbie-hidden data-preset-manager-import="kobold" class="menu_button fa-solid fa-file-import" title="Import preset" data-i18n="[title]Import preset"></i>
                                        <i data-newbie-hidden data-preset-manager-export="kobold" class="menu_button fa-solid fa-file-export" title="Export preset" data-i18n="[title]Export preset"></i>
                                        <i data-newbie-hidden data-preset-manager-restore="kobold" class="menu_button fa-solid fa-recycle" title="Restore current preset" data-i18n="[title]Restore current preset"></i>
                                        <i data-newbie-hidden data-preset-manager-delete="kobold" class="menu_button fa-solid fa-trash-can" title="Delete the preset" data-i18n="[title]Delete the preset"></i>
                                    </div>
                                </div>
                            </div>
                            <div id="novel_api-presets">
                                <h4 class="margin0">
                                    <span data-i18n="novelaipresets">NovelAI Presets</span>
                                    <a href="https://docs.sillytavern.app/usage/api-connections/novelai/" class="notes-link" target="_blank">
                                        <span class="fa-solid fa-circle-question note-link-span"></span>
                                    </a>
                                </h4>
                                <div class="flex-container flexNoGap">
                                    <select id="settings_preset_novel" class="flex1 text_pole" data-preset-manager-for="novel">
                                        <option value="gui" data-i18n="Default">Default</option>
                                    </select>
                                    <div class="flex-container marginLeft5 ">
                                        <input type="file" hidden data-preset-manager-file="novel" accept=".json, .settings">
                                        <i data-newbie-hidden data-preset-manager-update="novel" class="menu_button fa-solid fa-save" title="Update current preset" data-i18n="[title]Update current preset"></i>
                                        <i data-newbie-hidden data-preset-manager-new="novel" class="menu_button fa-solid fa-file-circle-plus" title="Save preset as" data-i18n="[title]Save preset as"></i>
                                        <i data-newbie-hidden data-preset-manager-import="novel" class="menu_button fa-solid fa-file-import" title="Import preset" data-i18n="[title]Import preset"></i>
                                        <i data-newbie-hidden data-preset-manager-export="novel" class="menu_button fa-solid fa-file-export" title="Export preset" data-i18n="[title]Export preset"></i>
                                        <i data-newbie-hidden data-preset-manager-restore="novel" class="menu_button fa-solid fa-recycle" title="Restore current preset" data-i18n="[title]Restore current preset"></i>
                                        <i data-newbie-hidden data-preset-manager-delete="novel" class="menu_button fa-solid fa-trash-can" title="Delete the preset" data-i18n="[title]Delete the preset"></i>
                                    </div>
                                </div>
                            </div>
                            <div id="openai_api-presets">
                                <div>
                                    <h4 class="margin0"><span data-i18n="openaipresets">Chat Completion Presets</span></h4>
                                    <div class="flex-container flexNoGap">
                                        <select id="settings_preset_openai" class="flex1 text_pole" data-preset-manager-for="openai">
                                            <option value="gui" data-i18n="Default">Default</option>
                                        </select>
                                        <div class="flex-container marginLeft5 ">
                                            <input id="openai_preset_import_file" type="file" accept=".json,.settings" hidden />
                                            <i id="update_oai_preset" class="menu_button fa-solid fa-save" title="Update current preset" data-i18n="[title]Update current preset"></i>
                                            <i id="new_oai_preset" class="menu_button fa-solid fa-file-circle-plus" title="Save preset as" data-i18n="[title]Save preset as"></i>
                                            <i data-newbie-hidden id="import_oai_preset" class="menu_button fa-solid fa-file-import" title="Import preset" data-i18n="[title]Import preset"></i>
                                            <i data-newbie-hidden id="export_oai_preset" class="menu_button fa-solid fa-file-export" title="Export preset" data-i18n="[title]Export preset"></i>
                                            <i data-newbie-hidden id="delete_oai_preset" class="menu_button fa-solid fa-trash-can" title="Delete the preset" data-i18n="[title]Delete the preset"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="textgenerationwebui_api-presets">
                                <h4 class="margin0"><span data-i18n="Text Completion presets">Text Completion presets</span></h4>
                                <div class="flex-container flexNoGap">
                                    <select id="settings_preset_textgenerationwebui" class="flex1 text_pole" data-preset-manager-for="textgenerationwebui">
                                    </select>
                                    <div class="flex-container marginLeft5 ">
                                        <input type="file" hidden data-preset-manager-file="textgenerationwebui" accept=".json, .settings">
                                        <i data-newbie-hidden data-preset-manager-update="textgenerationwebui" class="menu_button fa-solid fa-save" title="Update current preset" data-i18n="[title]Update current preset"></i>
                                        <i data-newbie-hidden data-preset-manager-new="textgenerationwebui" class="menu_button fa-solid fa-file-circle-plus" title="Save preset as" data-i18n="[title]Save preset as"></i>
                                        <i data-newbie-hidden data-preset-manager-import="textgenerationwebui" class="menu_button fa-solid fa-file-import" title="Import preset" data-i18n="[title]Import preset"></i>
                                        <i data-newbie-hidden data-preset-manager-export="textgenerationwebui" class="menu_button fa-solid fa-file-export" title="Export preset" data-i18n="[title]Export preset"></i>
                                        <i data-newbie-hidden data-preset-manager-restore="textgenerationwebui" class="menu_button fa-solid fa-recycle" title="Restore current preset" data-i18n="[title]Restore current preset"></i>
                                        <i data-newbie-hidden data-preset-manager-delete="textgenerationwebui" class="menu_button fa-solid fa-trash-can" title="Delete the preset" data-i18n="[title]Delete the preset"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div data-newbie-hidden id="ai_module_block_novel" class="width100p">
                            <div class="range-block">
                                <div class="range-block-title justifyLeft" data-i18n="AI Module">
                                    AI Module
                                </div>
                                <div class="toggle-description justifyLeft" data-i18n="Changes the style of the generated text.">
                                    Changes the style of the generated text.
                                </div>
                                <select id="nai_prefix">
                                    <option value="vanilla" data-i18n="No Module">No Module</option>
                                    <option value="special_instruct" data-i18n="Instruct">Instruct</option>
                                    <option value="special_proseaugmenter" data-i18n="Prose Augmenter">Prose Augmenter</option>
                                    <option value="theme_textadventure" data-i18n="Text Adventure">Text Adventure</option>
                                </select>
                            </div>
                        </div>
                        <div id="common-gen-settings-block" class="width100p">
                            <div id="pro-settings-block" class="flex-container gap10h5v justifyCenter">
                                <div id="amount_gen_block" class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexGrow flexShrink gap0">
                                    <small data-i18n="response legth(tokens)">Response (tokens)</small>
                                    <input class="neo-range-slider" type="range" id="amount_gen" name="volume" min="16" max="2048" step="1">
                                    <div data-randomization-disabled="true" class="wide100p">
                                        <input class="neo-range-input" type="number" min="16" max="2048" step="1" data-for="amount_gen" id="amount_gen_counter">
                                    </div>
                                    <div id="streaming_textgenerationwebui_block" class="flex-container alignitemscenter justifyCenter marginTop5">
                                        <label class="checkbox_label" for="streaming_textgenerationwebui">
                                            <input type="checkbox" id="streaming_textgenerationwebui" />
                                            <small><span data-i18n="Streaming">Streaming</span>
                                                <div class="margin5 fa-solid fa-circle-info opacity50p" data-i18n="[title]Streaming_desc" title="Display the response bit by bit as it is generated.&#13;When this is off, responses will be displayed all at once when they are complete."></div>
                                            </small>
                                        </label>
                                    </div>
                                    <div id="streaming_kobold_block" class="flex-container alignitemscenter justifyCenter marginTop5">
                                        <label class="checkbox_label" for="streaming_kobold">
                                            <input type="checkbox" id="streaming_kobold" />
                                            <small><span data-i18n="Streaming">Streaming</span>
                                                <div class="margin5 fa-solid fa-circle-info opacity50p" data-i18n="[title]Streaming_desc" title="Display the response bit by bit as it is generated.&#13;When this is off, responses will be displayed all at once when they are complete."></div>
                                            </small>
                                        </label>
                                    </div>
                                </div>
                                <div id="max_context_block" class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexGrow flexShrink gap0">
                                    <small data-i18n="context size(tokens)">Context (tokens)</small>
                                    <input class="neo-range-slider" type="range" id="max_context" name="volume" min="512" max="8192" step="64">
                                    <div data-randomization-disabled="true" class="wide100p">
                                        <input class="neo-range-input" type="number" min="512" max="8192" step="64" data-for="max_context" id="max_context_counter">
                                    </div>
                                    <div class="flex-container alignitemscenter justifyCenter marginTop5" id="max_context_unlocked_block">
                                        <label class="checkbox_label">
                                            <input id="max_context_unlocked" type="checkbox" />
                                            <small><span data-i18n="unlocked">Unlocked</span>
                                                <div id="max_context_unlocked_warning" class="fa-solid fa-circle-info opacity50p " data-i18n="[title]Only enable this if your model supports context sizes greater than 4096 tokens" title="Only enable this if your model supports context sizes greater than 4096 tokens.&#13;Increase only if you know what you're doing."></div>
                                            </small>
                                        </label>
                                    </div>
                                </div>
                                <small data-tg-type="openrouter">
                                    <span data-i18n="Max prompt cost:">Max prompt cost:</span> <span id="or_prompt_cost">&ndash;</span>
                                </small>
                            </div>
                            <hr>
                        </div>
                        <div id="respective-ranges-and-temps" class="width100p">
                            <!--
                            <div name="OldKoboldTempAndRepPenBlock" class="flex-container gap10h5v justifyCenter" id="range_block">
                            </div>
                            -->
                            <div id="range_block_novel">
                                <div class="range-block">
                                    <label class="checkbox_label widthFreeExpand">
                                        <input id="streaming_novel" type="checkbox" />
                                        <span data-i18n="Streaming">Streaming</span>
                                    </label>
                                    <div class="toggle-description justifyLeft">
                                        <span data-i18n="Display the response bit by bit as it is generated.">
                                            Display the response bit by bit as it is generated.</span><br>
                                        <span data-i18n="When this is off, responses will be displayed all at once when they are complete.">
                                            When this is off, responses will be displayed all at once when they are complete.
                                        </span>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Temperature">
                                        Temperature
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="temp_novel" name="volume" min="0.1" max="2.50" step="0.01">
                                        </div>
                                        <div class="range-block-counter">
                                            <input type="number" min="0.1" max="2.50" step="0.01" data-for="temp_novel" id="temp_counter_novel">
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="rep.pen">
                                        Repetition Penalty
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="rep_pen_novel" name="volume" min="1" max="8" step="0.05">
                                        </div>
                                        <div class="range-block-counter">
                                            <input type="number" min="1" max="8" step="0.05" data-for="rep_pen_novel" id="rep_pen_counter_novel">
                                        </div>
                                    </div>
                                </div>
                                <div data-newbie-hidden class="range-block">
                                    <div class="range-block-title" data-i18n="Rep. Pen. Range.">
                                        Rep Pen Range
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="rep_pen_size_novel" name="volume" min="0" max="8192" step="1">
                                        </div>
                                        <div class="range-block-counter">
                                            <input type="number" min="0" max="8192" step="1" data-for="rep_pen_size_novel" id="rep_pen_size_counter_novel">
                                        </div>
                                    </div>
                                </div>
                                <div data-newbie-hidden class="range-block">
                                    <div class="range-block-title" data-i18n="Rep. Pen. Slope">
                                        Repetition Penalty Slope
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="rep_pen_slope_novel" name="volume" min="0" max="10" step="0.01">
                                        </div>
                                        <div class="range-block-counter">
                                            <input type="number" min="0" max="10" step="0.01" data-for="rep_pen_slope_novel" id="rep_pen_slope_counter_novel">
                                        </div>
                                    </div>
                                </div>
                                <div data-newbie-hidden class="range-block">
                                    <div class="range-block-title" data-i18n="Rep. Pen. Freq.">
                                        Repetition Penalty Frequency
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="rep_pen_freq_novel" name="volume" min="0" max="1" step="0.001">
                                        </div>
                                        <div class="range-block-counter">
                                            <input type="number" min="0" max="1" step="0.001" data-for="rep_pen_freq_novel" id="rep_pen_freq_counter_novel">
                                        </div>
                                    </div>
                                </div>
                                <div data-newbie-hidden class="range-block">
                                    <div class="range-block-title" data-i18n="Rep. Pen. Presence">
                                        Repetition Penalty Presence
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="rep_pen_presence_novel" name="volume" min="0" max="1" step="0.001">
                                        </div>
                                        <div class="range-block-counter">
                                            <input type="number" min="0" max="1" step="0.001" data-for="rep_pen_presence_novel" id="rep_pen_presence_counter_novel">
                                        </div>
                                    </div>
                                </div>
                                <div data-newbie-hidden class="range-block">
                                    <div class="range-block-title" data-i18n="TFS">
                                        TFS
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="tail_free_sampling_novel" name="volume" min="0" max="1" step="0.001">
                                        </div>
                                        <div class="range-block-counter">
                                            <input type="number" min="0" max="1" step="0.001" data-for="tail_free_sampling_novel" id="tail_free_sampling_counter_novel">
                                        </div>
                                    </div>
                                </div>
                                <div data-newbie-hidden class="range-block">
                                    <div class="range-block-title" data-i18n="Phrase Repetition Penalty">
                                        Phrase Repetition Penalty
                                    </div>
                                    <select id="phrase_rep_pen_novel">
                                        <option value="off" data-i18n="Off">Off</option>
                                        <option value="very_light" data-i18n="Very light">Very light</option>
                                        <option value="light" data-i18n="Light">Light</option>
                                        <option value="medium" data-i18n="Medium">Medium</option>
                                        <option value="aggressive" data-i18n="Aggressive">Aggressive</option>
                                        <option value="very_aggressive" data-i18n="Very aggressive">Very aggressive</option>
                                    </select>
                                </div>
                            </div>
                            <div id="range_block_openai">
                                <div data-newbie-hidden class="range-block">
                                    <label class="checkbox_label">
                                        <input id="oai_max_context_unlocked" type="checkbox" />
                                        <span data-i18n="Unlocked Context Size">
                                            Unlocked Context Size
                                        </span>
                                    </label>
                                    <div class="toggle-description justifyLeft">
                                        <span data-i18n="Unrestricted maximum value for the context slider">
                                            Unrestricted maximum value for the context size slider. Enable only if you know
                                            what you're doing.
                                        </span>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Context Size (tokens)">
                                        Context Size (tokens)
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="openai_max_context" name="volume" min="512" max="4095" step="1">
                                        </div>
                                        <div class="range-block-counter" data-randomization-disabled="true">
                                            <input type="number" min="512" max="4095" step="1" data-for="openai_max_context" id="openai_max_context_counter">
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Max Response Length (tokens)">
                                        Max Response Length (tokens)
                                    </div>
                                    <div class="wide100p">
                                        <input type="number" id="openai_max_tokens" name="openai_max_tokens" class="text_pole" min="1" max="16384">
                                    </div>
                                </div>
                                <div class="range-block" data-source="openai,custom">
                                    <div class="range-block-title" data-i18n="Multiple swipes per generation">
                                        Multiple swipes per generation
                                    </div>
                                    <div class="wide100p">
                                        <input type="number" id="n_openai" name="n_openai" class="text_pole" min="1" value="1">
                                    </div>
                                </div>
                                <div data-source="openrouter">
                                    Max prompt cost: <span id="openrouter_max_prompt_cost">Unknown</span>
                                </div>
                                <hr>
                                <div class="range-block">
                                    <label for="stream_toggle" title="Enable OpenAI completion streaming" data-i18n="[title]Enable OpenAI completion streaming" class="checkbox_label widthFreeExpand">
                                        <input id="stream_toggle" type="checkbox" /><span data-i18n="Streaming">
                                            Streaming</span>
                                    </label>
                                    <div class="toggle-description justifyLeft">
                                        <span data-i18n="Display the response bit by bit as it is generated.">
                                            Display the response bit by bit as it is generated.
                                        </span><br>
                                        <span data-i18n="When this is off, responses will be displayed all at once when they are complete.">
                                            When this is off, responses will be displayed all at once when they are complete.
                                        </span>
                                    </div>
                                </div>
                                <div class="range-block" data-source="cohere">
                                    <label for="websearch_toggle" title="Enable Cohere web-search connector" data-i18n="[title]Enable Cohere web-search connector" class="checkbox_label widthFreeExpand">
                                        <input id="websearch_toggle" type="checkbox" />
                                        <span data-i18n="Web-search">Web-search</span>
                                    </label>
                                    <div class="toggle-description justifyLeft">
                                        <span data-i18n="Allow the model to use the web-search connector.">
                                            Allow the model to use the web-search connector.
                                        </span>
                                    </div>
                                </div>
                                <div class="range-block" data-source="openai,claude,windowai,openrouter,ai21,scale,makersuite,mistralai,custom,cohere,perplexity,groq,01ai">
                                    <div class="range-block-title" data-i18n="Temperature">
                                        Temperature
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="temp_openai" name="volume" min="0" max="2.0" step="0.01">
                                        </div>
                                        <div class="range-block-counter">
                                            <input type="number" min="0" max="2.0" step="0.01" data-for="temp_openai" id="temp_counter_openai">
                                        </div>
                                    </div>
                                </div>
                                <div data-newbie-hidden class="range-block" data-source="openai,openrouter,ai21,custom,cohere,perplexity,groq">
                                    <div class="range-block-title" data-i18n="Frequency Penalty">
                                        Frequency Penalty
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="freq_pen_openai" name="volume" min="-2" max="2" step="0.01">
                                        </div>
                                        <div class="range-block-counter">
                                            <input type="number" min="-2" max="2" step="0.01" data-for="freq_pen_openai" id="freq_pen_counter_openai">
                                        </div>
                                    </div>
                                </div>
                                <div data-newbie-hidden class="range-block" data-source="openai,openrouter,ai21,custom,cohere,perplexity,groq">
                                    <div class="range-block-title" data-i18n="Presence Penalty">
                                        Presence Penalty
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="pres_pen_openai" name="volume" min="-2" max="2" step="0.01">
                                        </div>
                                        <div class="range-block-counter">
                                            <input type="number" min="-2" max="2" step="0.01" data-for="pres_pen_openai" id="pres_pen_counter_openai">
                                        </div>
                                    </div>
                                </div>
                                <div data-newbie-hidden class="range-block" data-source="ai21">
                                    <div class="range-block-title" data-i18n="Count Penalty">
                                        Count Penalty
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="count_pen" name="volume" min="0" max="1" step="0.01">
                                        </div>
                                        <div class="range-block-counter">
                                            <input type="number" min="0" max="1" step="0.01" data-for="count_pen" id="count_pen_counter">
                                        </div>
                                    </div>
                                </div>
                                <div data-newbie-hidden class="range-block" data-source="claude,openrouter,ai21,makersuite,cohere,perplexity">
                                    <div class="range-block-title" data-i18n="Top K">
                                        Top K
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="top_k_openai" name="volume" min="0" max="500" step="1">
                                        </div>
                                        <div class="range-block-counter">
                                            <input type="number" min="0" max="200" step="1" data-for="top_k_openai" id="top_k_counter_openai">
                                        </div>
                                    </div>
                                </div>
                                <div data-newbie-hidden class="range-block" data-source="openai,claude,openrouter,ai21,scale,makersuite,mistralai,custom,cohere,perplexity,groq,01ai">
                                    <div class="range-block-title" data-i18n="Top P">
                                        Top P
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="top_p_openai" name="volume" min="0" max="1" step="0.01">
                                        </div>
                                        <div class="range-block-counter">
                                            <input type="number" min="0" max="1" step="0.01" data-for="top_p_openai" id="top_p_counter_openai">
                                        </div>
                                    </div>
                                </div>
                                <div data-newbie-hidden class="range-block" data-source="openrouter">
                                    <div class="range-block-title" data-i18n="Repetition Penalty">
                                        Repetition Penalty
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="repetition_penalty_openai" name="volume" min="1" max="2" step="0.01">
                                        </div>
                                        <div class="range-block-counter">
                                            <input type="number" min="1" max="2" step="0.01" data-for="repetition_penalty_openai" id="repetition_penalty_counter_openai">
                                        </div>
                                    </div>
                                </div>
                                <div data-newbie-hidden class="range-block" data-source="openrouter">
                                    <div class="range-block-title" data-i18n="Min P">
                                        Min P
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="min_p_openai" name="volume" min="0" max="1" step="0.001">
                                        </div>
                                        <div class="range-block-counter">
                                            <input type="number" min="0" max="1" step="0.001" data-for="min_p_openai" id="min_p_counter_openai">
                                        </div>
                                    </div>
                                </div>
                                <div data-newbie-hidden class="range-block" data-source="openrouter">
                                    <div class="range-block-title" data-i18n="Top A">
                                        Top A
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="top_a_openai" name="volume" min="0" max="1" step="0.001">
                                        </div>
                                        <div class="range-block-counter">
                                            <input type="number" min="0" max="1" step="0.001" data-for="top_a_openai" id="top_a_counter_openai">
                                        </div>
                                    </div>
                                </div>
                                <div class="inline-drawer m-t-1 wide100p">
                                    <div class="inline-drawer-toggle inline-drawer-header">
                                        <b data-i18n="Quick Prompts Edit">Quick Prompts Edit</b>
                                        <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                                    </div>
                                    <div class="inline-drawer-content">
                                        <div class="range-block m-t-1">
                                            <div class="justifyLeft" data-i18n="Main">Main</div>
                                            <div class="wide100p">
                                                <textarea id="main_prompt_quick_edit_textarea" class="text_pole textarea_compact autoSetHeight" rows="6" placeholder="&mdash;" data-pm-prompt="main"></textarea>
                                            </div>
                                        </div>
                                        <div class="range-block m-t-1">
                                            <div class="justifyLeft" data-i18n="Auxiliary">Auxiliary</div>
                                            <div class="wide100p">
                                                <textarea id="nsfw_prompt_quick_edit_textarea" class="text_pole textarea_compact autoSetHeight" rows="6" placeholder="&mdash;" data-pm-prompt="nsfw"></textarea>
                                            </div>
                                        </div>
                                        <div class="range-block m-t-1">
                                            <div class="justifyLeft" data-i18n="Post-History Instructions">Post-History Instructions</div>
                                            <div class="wide100p">
                                                <textarea id="jailbreak_prompt_quick_edit_textarea" class="text_pole textarea_compact autoSetHeight" rows="6" placeholder="&mdash;" data-pm-prompt="jailbreak"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div data-newbie-hidden class="inline-drawer wide100p">
                                    <div class="inline-drawer-toggle inline-drawer-header">
                                        <b data-i18n="Utility Prompts">Utility Prompts</b>
                                        <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                                    </div>
                                    <div class="inline-drawer-content">
                                        <div class="range-block m-t-1">
                                            <div class="range-block-title openai_restorable">
                                                <span data-i18n="Impersonation prompt">Impersonation prompt</span>
                                                <div id="impersonation_prompt_restore" data-i18n="[title]Restore default prompt" title="Restore default prompt" class="right_menu_button">
                                                    <div class="fa-solid fa-clock-rotate-left"></div>
                                                </div>
                                            </div>
                                            <div class="toggle-description justifyLeft" data-i18n="Prompt that is used for Impersonation function">
                                                Prompt that is used for Impersonation function
                                            </div>
                                            <div class="wide100p">
                                                <textarea id="impersonation_prompt_textarea" class="text_pole textarea_compact autoSetHeight" name="impersonation_prompt" rows="3" placeholder="&mdash;"></textarea>
                                            </div>
                                        </div>
                                        <div class="range-block m-t-1">
                                            <div class="range-block-title openai_restorable" data-i18n="World Info Format Template">
                                                <span>World Info format template</span>
                                                <div id="wi_format_restore" data-i18n="[title]Restore default format" title="Restore default format" class="right_menu_button">
                                                    <div class="fa-solid fa-clock-rotate-left"></div>
                                                </div>
                                            </div>
                                            <div class="toggle-description justifyLeft">
                                                <span data-i18n="Wraps activated World Info entries before inserting into the prompt.">Wraps activated World Info entries before inserting into the prompt.</span>
                                                <span data-i18n="scenario_format_template_part_1">Use</span><code>{0}</code>
                                                <span data-i18n="scenario_format_template_part_2">to mark a place where the content is inserted.</span>
                                            </div>
                                            <div class="wide100p">
                                                <textarea id="wi_format_textarea" class="text_pole textarea_compact autoSetHeight" rows="3" placeholder="&mdash;"></textarea>
                                            </div>
                                        </div>
                                        <div class="range-block m-t-1">
                                            <div class="range-block-title openai_restorable">
                                                <span data-i18n="Scenario Format Template">Scenario format template</span>
                                                <div id="scenario_format_restore" data-i18n="[title]Restore default format" title="Restore default format" class="right_menu_button">
                                                    <div class="fa-solid fa-clock-rotate-left"></div>
                                                </div>
                                            </div>
                                            <div class="toggle-description justifyLeft">
                                                <span data-i18n="scenario_format_template_part_1">Use</span> <code>{{scenario}}</code> <span data-i18n="scenario_format_template_part_2">to mark a place where the content is inserted.</span>
                                            </div>
                                            <div class="wide100p">
                                                <textarea id="scenario_format_textarea" class="text_pole textarea_compact autoSetHeight" rows="3" placeholder="&mdash;"></textarea>
                                            </div>
                                        </div>
                                        <div class="range-block m-t-1">
                                            <div class="range-block-title openai_restorable">
                                                <span data-i18n="Personality Format Template">Personality format template</span>
                                                <div id="personality_format_restore" data-i18n="[title]Restore default format" title="Restore default format" class="right_menu_button">
                                                    <div class="fa-solid fa-clock-rotate-left"></div>
                                                </div>
                                            </div>
                                            <div class="toggle-description justifyLeft">
                                                <span data-i18n="scenario_format_template_part_1">Use</span> <code>{{personality}}</code> <span data-i18n="scenario_format_template_part_2">to mark a place where the content is inserted.</span>
                                            </div>
                                            <div class="wide100p">
                                                <textarea id="personality_format_textarea" class="text_pole textarea_compact autoSetHeight" rows="3" placeholder="&mdash;"></textarea>
                                            </div>
                                        </div>
                                        <div class="range-block m-t-1">
                                            <div class="range-block-title openai_restorable">
                                                <span data-i18n="Group Nudge Prompt Template">Group Nudge prompt template</span>
                                                <div id="group_nudge_prompt_restore" data-i18n="[title]Restore default format" title="Restore default format" class="right_menu_button">
                                                    <div class="fa-solid fa-clock-rotate-left"></div>
                                                </div>
                                            </div>
                                            <div class="toggle-description justifyLeft">
                                                <span data-i18n="Sent at the end of the group chat history to force reply from a specific character.">
                                                    Sent at the end of the group chat history to force reply from a specific character.
                                                </span>
                                            </div>
                                            <div class="wide100p">
                                                <textarea id="group_nudge_prompt_textarea" class="text_pole textarea_compact autoSetHeight" rows="3" placeholder="&mdash;"></textarea>
                                            </div>
                                        </div>
                                        <div class="range-block m-t-1">
                                            <div class="range-block-title openai_restorable">
                                                <span data-i18n="New Chat">New Chat</span>
                                                <div id="newchat_prompt_restore" data-i18n="[title]Restore new chat prompt" title="Restore new chat prompt" class="right_menu_button">
                                                    <div class="fa-solid fa-clock-rotate-left"></div>
                                                </div>
                                            </div>
                                            <div class="toggle-description justifyLeft">
                                                <span data-i18n="Set at the beginning of the chat history to indicate that a new chat is about to start.">
                                                    Set at the beginning of the chat history to indicate that a new chat is about to start.
                                                </span>
                                            </div>
                                            <div class="wide100p">
                                                <textarea id="newchat_prompt_textarea" class="text_pole textarea_compact autoSetHeight" name="new_chat" rows="3" placeholder="&mdash;"></textarea>
                                            </div>
                                        </div>
                                        <div class="range-block m-t-1">
                                            <div class="range-block-title openai_restorable">
                                                <span data-i18n="New Group Chat">New Group Chat</span>
                                                <div id="newgroupchat_prompt_restore" title="Restore default prompt" data-i18n="[title]Restore new group chat prompt" class="right_menu_button">
                                                    <div class="fa-solid fa-clock-rotate-left"></div>
                                                </div>
                                            </div>
                                            <div class="toggle-description justifyLeft">
                                                <span data-i18n="Set at the beginning of the chat history to indicate that a new group chat is about to start.">
                                                    Set at the beginning of the chat history to indicate that a new group chat is about to start.
                                                </span>
                                            </div>
                                            <div class="wide100p">
                                                <textarea id="newgroupchat_prompt_textarea" class="text_pole textarea_compact autoSetHeight" name="new_group_chat" rows="3" placeholder="&mdash;"></textarea>
                                            </div>
                                        </div>
                                        <div class="range-block m-t-1">
                                            <div class="range-block-title openai_restorable">
                                                <span data-i18n="New Example Chat">New Example Chat</span>
                                                <div id="newexamplechat_prompt_restore" title="Restore new example chat prompt" data-i18n="[title]Restore default prompt" class="right_menu_button">
                                                    <div class="fa-solid fa-clock-rotate-left"></div>
                                                </div>
                                            </div>
                                            <div class="toggle-description justifyLeft">
                                                <span data-i18n="Set at the beginning of Dialogue examples to indicate that a new example chat is about to start.">
                                                    Set at the beginning of Dialogue examples to indicate that a new example chat is about to start.
                                                </span>
                                            </div>
                                            <div class="wide100p">
                                                <textarea id="newexamplechat_prompt_textarea" class="text_pole textarea_compact autoSetHeight" name="new_example_chat" rows="3" placeholder="&mdash;"></textarea>
                                            </div>
                                        </div>
                                        <div class="range-block m-t-1">
                                            <div class="range-block-title openai_restorable">
                                                <span data-i18n="Continue nudge">Continue nudge</span>
                                                <div id="continue_nudge_prompt_restore" data-i18n="[title]Restore new chat prompt" title="Restore new chat prompt" class="right_menu_button">
                                                    <div class="fa-solid fa-clock-rotate-left"></div>
                                                </div>
                                            </div>
                                            <div class="toggle-description justifyLeft">
                                                <span data-i18n="Set at the end of the chat history when the continue button is pressed.">
                                                    Set at the end of the chat history when the continue button is pressed.
                                                </span>
                                            </div>
                                            <div class="wide100p">
                                                <textarea id="continue_nudge_prompt_textarea" class="text_pole textarea_compact autoSetHeight" name="continue_nudge" rows="3" placeholder="&mdash;"></textarea>
                                            </div>
                                        </div>
                                        <div class="range-block m-t-1">
                                            <div class="range-block-title justifyLeft" data-i18n="Replace empty message">
                                                Replace empty message
                                            </div>
                                            <div class="toggle-description justifyLeft">
                                                <span data-i18n="Send this text instead of nothing when the text box is empty.">
                                                    Send this text instead of nothing when the text box is empty.
                                                </span>
                                            </div>
                                            <div class="wide100p">
                                                <textarea id="send_if_empty_textarea" class="text_pole textarea_compact autoSetHeight" name="send_if_empty" rows="3" placeholder="&mdash;"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div data-newbie-hidden class="range-block" data-source="openai,openrouter,mistralai,custom,cohere,groq">
                                    <div class="range-block-title justifyLeft" data-i18n="Seed">
                                        Seed
                                    </div>
                                    <div class="toggle-description justifyLeft" data-i18n="Set to get deterministic results. Use -1 for random seed.">
                                        Set to get deterministic results. Use -1 for random seed.
                                    </div>
                                    <div class="wide100p">
                                        <input type="number" id="seed_openai" name="seed_openai" class="text_pole" min="-1" max="2147483647" value="-1">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="advanced-ai-config-block" class="width100p">
                            <div id="kobold_api-settings">
                                <div class="flex-container gap10h5v justifyCenter">
                                    <div class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small>
                                            <span data-i18n="Temperature">Temperature</span>
                                            <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]Temperature controls the randomness in token selection" title="Temperature controls the randomness in token selection:&#13;- low temperature (<1.0) leads to more predictable text, favoring higher probability tokens.&#13;- high temperature (>1.0) increases creativity and diversity in the output by giving lower probability tokens a better chance.&#13;Set to 1.0 for the original probabilities."></div>
                                        </small>
                                        <input class="neo-range-slider" type="range" id="temp" name="volume" min="0.0" max="4.0" step="0.01">
                                        <input class="neo-range-input" type="number" min="0.0" max="4.0" step="0.01" data-for="temp" id="temp_counter">
                                    </div>
                                    <div data-newbie-hidden class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small>
                                            <span data-i18n="Top K">Top K</span>
                                            <div class="fa-solid fa-circle-info opacity50p" title="Top K sets a maximum amount of top tokens that can be chosen from.&#13;E.g Top K is 20, this means only the 20 highest ranking tokens will be kept (regardless of their probabilities being diverse or limited).&#13;Set to 0 to disable." data-i18n="[title]Top_K_desc"></div>
                                        </small>
                                        <input class="neo-range-slider" type="range" id="top_k" name="volume" min="0" max="100" step="1">
                                        <input class="neo-range-input" type="number" min="0" max="100" step="1" data-for="top_k" id="top_k_counter">
                                    </div>
                                    <div data-newbie-hidden class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small>
                                            Top P
                                            <div class="fa-solid fa-circle-info opacity50p" title="Top P (a.k.a. nucleus sampling) adds up all the top tokens required to add up to the target percentage.&#13;E.g If the Top 2 tokens are both 25%, and Top P is 0.50, only the Top 2 tokens are considered.&#13;Set to 1.0 to disable." data-i18n="[title]Top_P_desc"></div>
                                        </small>
                                        <input class="neo-range-slider" type="range" id="top_p" name="volume" min="0" max="1" step="0.01">
                                        <input class="neo-range-input" type="number" min="0" max="1" step="0.01" data-for="top_p" id="top_p_counter">
                                    </div>
                                    <div data-newbie-hidden class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small>
                                            <span data-i18n="Typical P">Typical P</span>
                                            <div class="fa-solid fa-circle-info opacity50p" title="Typical P Sampling prioritizes tokens based on their deviation from the average entropy of the set.&#13;It maintains tokens whose cumulative probability is close to a predefined threshold (e.g., 0.5), emphasizing those with average information content.&#13;Set to 1.0 to disable." data-i18n="[title]Typical_P_desc"></div>
                                        </small>
                                        <input class="neo-range-slider" type="range" id="typical_p" name="volume" min="0" max="1" step="0.001">
                                        <input class="neo-range-input" type="number" min="0" max="1" step="0.001" data-for="typical_p" id="typical_p_counter">
                                    </div>
                                    <div class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small>
                                            <span data-i18n="Min P">Min P</span>
                                            <div class="fa-solid fa-circle-info opacity50p" title="Min P sets a base minimum probability.&#13;This is scaled according to the top token's probability.&#13;E.g If Top token is 80% probability, and Min P is 0.1, only tokens higher than 8% would be considered.&#13;Set to 0 to disable." data-i18n="[title]Min_P_desc"></div>
                                        </small>
                                        <input class="neo-range-slider" type="range" id="min_p" name="volume" min="0" max="1" step="0.001">
                                        <input class="neo-range-input" type="number" min="0" max="1" step="0.001" data-for="min_p" id="min_p_counter">
                                    </div>
                                    <div data-newbie-hidden class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small>
                                            <span data-i18n="Top A">Top A</span>
                                            <div class="fa-solid fa-circle-info opacity50p" title="Top A sets a threshold for token selection based on the square of the highest token probability.&#13;E.g if the Top-A value is 0.2 and the top token's probability is 50%, tokens with probabilities below 5% (0.2 * 0.5^2) are excluded.&#13;Set to 0 to disable." data-i18n="[title]Top_A_desc"></div>
                                        </small>
                                        <input class="neo-range-slider" type="range" id="top_a" name="volume" min="0" max="1" step="0.001">
                                        <input class="neo-range-input" type="number" min="0" max="1" step="0.001" data-for="top_a" id="top_a_counter">
                                    </div>
                                    <div data-newbie-hidden class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small>
                                            <span data-i18n="TFS">TFS</span>
                                            <div class="fa-solid fa-circle-info opacity50p" title="Tail-Free Sampling (TFS) searches for a tail of low-probability tokens in the distribution,&#13;by analyzing the rate of change in token probabilities using derivatives. It retains tokens up to a threshold (e.g., 0.3) based on the normalized second derivative.&#13;The closer to 0, the more discarded tokens. Set to 1.0 to disable." data-i18n="[title]Tail_Free_Sampling_desc"></div>
                                        </small>
                                        <input class="neo-range-slider" type="range" id="tfs" name="volume" min="0" max="1" step="0.001">
                                        <input class="neo-range-input" type="number" min="0" max="1" step="0.001" data-for="tfs" id="tfs_counter">
                                    </div>
                                    <div class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small>
                                            <span data-i18n="rep.pen">Repetition Penalty</span>
                                        </small>
                                        <input class="neo-range-slider" type="range" id="rep_pen" name="volume" min="1" max="3" step="0.01">
                                        <input class="neo-range-input" type="number" min="1" max="3" step="0.01" data-for="rep_pen" id="rep_pen_counter">
                                    </div>
                                    <div class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small>
                                            <span data-i18n="rep.pen range">Rep Pen Range</span>
                                        </small>
                                        <input class="neo-range-slider" type="range" id="rep_pen_range" name="volume" min="0" max="4096" step="1">
                                        <input class="neo-range-input" type="number" min="0" max="4096" step="1" data-for="rep_pen_range" id="rep_pen_range_counter">
                                    </div>
                                    <div data-newbie-hidden class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small>
                                            <span data-i18n="Rep. Pen. Slope">Repetition Penalty Slope</span>
                                        </small>
                                        <input class="neo-range-slider" type="range" id="rep_pen_slope" name="volume" min="0" max="10" step="0.01">
                                        <input class="neo-range-input" type="number" min="0" max="10" step="0.01" data-for="rep_pen_slope" id="rep_pen_slope_counter">
                                    </div>
                                    <div data-newbie-hidden name="miroStatBlock-kobold" class="wide100p">
                                        <h4 class="wide100p textAlignCenter" data-i18n="Mirostat">Mirostat</h4>
                                        <div class="flex-container flexFlowRow gap10px flexShrink">
                                            <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0">
                                                <small>
                                                    <span data-i18n="Mode">Mode</span>
                                                    <div class="fa-solid fa-circle-info opacity50p" title="A value of 0 disables Mirostat entirely. 1 is for Mirostat 1.0, and 2 is for Mirostat 2.0" data-i18n="[title]Mirostat_Mode_desc"></div>
                                                </small>
                                                <input class="neo-range-slider" type="range" id="mirostat_mode_kobold" name="volume" min="0" max="2" step="1" />
                                                <input class="neo-range-input" type="number" min="0" max="2" step="1" data-for="mirostat_mode_kobold" id="mirostat_mode_counter_kobold">
                                            </div>
                                            <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0">
                                                <small>
                                                    <span data-i18n="Tau">Tau</span>
                                                    <div class="fa-solid fa-circle-info opacity50p" title="Controls variability of Mirostat outputs" data-i18n="[title]Mirostat_Tau_desc"></div>
                                                </small>
                                                <input class="neo-range-slider" type="range" id="mirostat_tau_kobold" name="volume" min="0" max="20" step="0.01" />
                                                <input class="neo-range-input" type="number" min="0" max="20" step="0.01" data-for="mirostat_tau_kobold" id="mirostat_tau_counter_kobold">
                                            </div>
                                            <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0">
                                                <small>
                                                    <span data-i18n="Eta">Eta</span>
                                                    <div class="fa-solid fa-circle-info opacity50p" title="Controls learning rate of Mirostat" data-i18n="[title]Mirostat_Eta_desc"></div>
                                                </small>
                                                <input class="neo-range-slider" type="range" id="mirostat_eta_kobold" name="volume" min="0" max="1" step="0.01" />
                                                <input class="neo-range-input" type="number" min="0" max="1" step="0.01" data-for="mirostat_eta_kobold" id="mirostat_eta_counter_kobold">
                                            </div>
                                        </div>
                                        <hr class="wide100p">
                                    </div>
                                    <div data-newbie-hidden class="alignitemscenter justifyCenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <label class="checkbox_label alignItemsBaseline" for="use_default_badwordsids">
                                            <input id="use_default_badwordsids" type="checkbox" />
                                            <span>
                                                <span data-i18n="Ban EOS Token">Ban EOS Token</span>
                                                <small class="fa-solid fa-circle-info opacity50p" title="Ban the End-of-Sequence (EOS) token with KoboldCpp (and possibly also other tokens with KoboldAI).&#13;Good for story writing, but should not be used for chat and instruct mode." data-i18n="[title]Ban_EOS_Token_desc"></small>
                                            </span>
                                        </label>
                                    </div>
                                    <div data-newbie-hidden class="alignitemscenter textAlignCenter flexBasis30p flexGrow flexShrink gap0">
                                        <!-- <hr class="wide100p"> -->
                                        <small data-i18n="Seed">Seed</small>
                                        <!-- Max value is 2**64 - 1 -->
                                        <input type="number" id="seed_kobold" class="text_pole wideMax100px" min="-1" value="-1" max="18446744073709551615" />
                                    </div>
                                    <div data-newbie-hidden id="grammar_block" class="wide100p">
                                        <hr class="wide100p">
                                        <h4 class="wide100p textAlignCenter"><span data-i18n="GBNF Grammar">GBNF Grammar</span>
                                            <a href="https://github.com/ggerganov/llama.cpp/blob/master/grammars/README.md" target="_blank">
                                                <small>
                                                    <div class="fa-solid fa-circle-question note-link-span"></div>
                                                </small>
                                            </a>
                                        </h4>
                                        <textarea id="grammar" rows="4" class="text_pole textarea_compact monospace" data-i18n="[placeholder]Type in the desired custom grammar" placeholder="Type in the desired custom grammar"></textarea>
                                    </div>
                                    <div data-newbie-hidden name="KoboldSamplerOrderBlock" class="range-block flexFlowColumn">
                                        <hr class="wide100p">
                                        <div class="range-block-title">
                                            <span data-i18n="Samplers Order">Samplers Order</span>
                                        </div>
                                        <div class="toggle-description widthUnset" data-i18n="Samplers will be applied in a top-down order. Use with caution.">
                                            Samplers will be applied in a top-down order.
                                            Use with caution.
                                        </div>
                                        <div id="kobold_order" class="prompt_order">
                                            <div data-id="0">
                                                <span data-i18n="Top K">Top K</span>
                                                <small>0</small>
                                            </div>
                                            <div data-id="1">
                                                <span data-i18n="Top A">Top A</span>
                                                <small>1</small>
                                            </div>
                                            <div data-id="2">
                                                <span data-i18n="Top P">Top P & Min P</span>
                                                <small>2</small>
                                            </div>
                                            <div data-id="3">
                                                <span data-i18n="Tail Free Sampling">Tail Free Sampling</span>
                                                <small>3</small>
                                            </div>
                                            <div data-id="4">
                                                <span data-i18n="Typical P">Typical P</span>
                                                <small>4</small>
                                            </div>
                                            <div data-id="5">
                                                <span data-i18n="Temperature">Temperature</span>
                                                <small>5</small>
                                            </div>
                                            <div data-id="6">
                                                <span data-i18n="Repetition Penalty">Repetition Penalty</span>
                                                <small>6</small>
                                            </div>
                                        </div>
                                        <div id="samplers_order_recommended" class="menu_button menu_button_icon">
                                            <span data-i18n="Load koboldcpp order">Load koboldcpp order</span>
                                        </div>
                                    </div>
                                </div>
                            </div><!-- end of kobold settings-->
                            <div data-newbie-hidden id="novel_api-settings">
                                <div class="range-block">
                                    <div class="range-block-title openai_restorable">
                                        <span data-i18n="Preamble">Preamble</span>
                                        <div id="nai_preamble_restore" title="Restore default prompt" data-i18n="[title]Restore default prompt" class="right_menu_button">
                                            <div class="fa-solid fa-clock-rotate-left "></div>
                                        </div>
                                    </div>
                                    <div class="toggle-description justifyLeft" data-i18n="Use style tags to modify the writing style of the output.">
                                        Use style tags to modify the writing style of the output.
                                    </div>
                                    <div class="wide100p">
                                        <textarea id="nai_preamble_textarea" class="text_pole textarea_compact" name="nai_preamble" rows="2" placeholder=""></textarea>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title justifyLeft">
                                        <span data-i18n="Banned Tokens">Banned Tokens</span>
                                    </div>
                                    <div class="toggle-description justifyLeft" data-i18n="Sequences you don't want to appear in the output. One per line.">
                                        Sequences you don't want to appear in the output. One per line. Text or [token ids].
                                    </div>
                                    <div class="wide100p">
                                        <textarea id="nai_banned_tokens" class="text_pole textarea_compact" name="nai_banned_tokens" rows="3" placeholder="Example:&#10;some text&#10;[42, 69, 1337]"></textarea>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div id="logit_bias_novel" class="range-block-title title_restorable">
                                        <span data-i18n="Logit Bias">Logit Bias</span>
                                        <div id="novelai_logit_bias_new_entry" class="menu_button menu_button_icon">
                                            <i class="fa-xs fa-solid fa-plus"></i>
                                            <small data-i18n="Add">Add</small>
                                        </div>
                                    </div>
                                    <div class="toggle-description justifyLeft" data-i18n="Helps to ban or reenforce the usage of certain words">
                                        Helps to ban or reinforce the usage of certain tokens.
                                    </div>
                                    <div class="flex-container flexFlowColumn wide100p">
                                        <div class="logit_bias_list"></div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <hr>
                                    <div class="range-block-title justifyLeft" data-i18n="CFG Scale">
                                        CFG Scale
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="cfg_scale_novel" name="volume" min="1" max="3" step="0.05">
                                        </div>
                                        <div class="range-block-counter">
                                            <input type="number" min="1" max="3" step="0.05" data-for="cfg_scale_novel" id="cfg_scale_counter_novel">
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title justifyLeft">
                                        <span data-i18n="Negative Prompt">Negative Prompt</span>
                                    </div>
                                    <div class="wide100p">
                                        <textarea id="nai_cfg_uc" class="text_pole textarea_compact" name="cfg_uc" rows="2" data-i18n="[placeholder]Add text here that would make the AI generate things you don't want in your outputs." placeholder="Add text here that would make the AI generate things you don't want in your outputs."></textarea>
                                    </div>
                                    <small class="margin-bot-10px" data-i18n="Used if CFG Scale is unset globally, per chat or character">
                                        Used if CFG Scale is unset globally, per chat or character
                                    </small>
                                    <hr>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Top P">
                                        Top P
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="top_p_novel" name="volume" min="0" max="1" step="0.001">
                                        </div>
                                        <div class="range-block-counter">
                                            <input type="number" min="0" max="1" step="0.001" data-for="top_p_novel" id="top_p_counter_novel">
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Top A">
                                        Top A
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="top_a_novel" name="volume" min="0" max="1" step="0.001">
                                        </div>
                                        <div class="range-block-counter">
                                            <input type="number" min="0" max="1" step="0.001" data-for="top_a_novel" id="top_a_counter_novel">
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Top K">
                                        Top K
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="top_k_novel" name="volume" min="0" max="300" step="1">
                                        </div>
                                        <div class="range-block-counter">
                                            <input type="number" min="0" max="300" step="1" data-for="top_k_novel" id="top_k_counter_novel">
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Mirostat Tau">
                                        Mirostat Tau
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="mirostat_tau_novel" name="volume" min="0" max="6" step="0.01">
                                        </div>
                                        <div class="range-block-counter">
                                            <input type="number" min="0" max="6" step="0.01" data-for="mirostat_tau_novel" id="mirostat_tau_counter_novel">
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Mirostat LR">
                                        Mirostat LR
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="mirostat_lr_novel" name="volume" min="0" max="1" step="0.01">
                                        </div>
                                        <div class="range-block-counter">
                                            <input type="number" min="0" max="1" step="0.01" data-for="mirostat_lr_novel" id="mirostat_lr_counter_novel">
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Typical P">
                                        Typical P
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="typical_p_novel" name="volume" min="0" max="1" step="0.001">
                                        </div>
                                        <div class="range-block-counter">
                                            <input type="number" min="0" max="1" step="0.001" data-for="typical_p_novel" id="typical_p_counter_novel">
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block">
                                    <div class="range-block-title" data-i18n="Min Length">
                                        Min Length
                                    </div>
                                    <div class="range-block-range-and-counter">
                                        <div class="range-block-range">
                                            <input type="range" id="min_length_novel" name="volume" min="1" max="150" step="1">
                                        </div>
                                        <div class="range-block-counter">
                                            <input type="number" min="1" max="150" step="1" data-for="min_length_novel" id="min_length_counter_novel">
                                        </div>
                                    </div>
                                </div>
                                <div class="range-block flexFlowColumn">
                                    <div class="range-block-title">
                                        <span data-i18n="Samplers Order">Samplers Order</span>
                                    </div>
                                    <div class="toggle-description widthUnset" data-i18n="Samplers will be applied in a top-down order. Use with caution.">
                                        Samplers will be applied in a top-down order. Use with caution.
                                    </div>
                                    <div id="novel_order" class="prompt_order">
                                        <div data-id="0">
                                            <span data-i18n="Temperature">Temperature</span>
                                            <small>0</small>
                                            <div class="toggle_button right_menu_button"></div>
                                        </div>
                                        <div data-id="1">
                                            <span data-i18n="Top K Sampling">Top K Sampling</span>
                                            <small>1</small>
                                            <div class="toggle_button right_menu_button"></div>
                                        </div>
                                        <div data-id="2">
                                            <span data-i18n="Nucleus Sampling">Nucleus Sampling</span>
                                            <small>2</small>
                                            <div class="toggle_button right_menu_button"></div>
                                        </div>
                                        <div data-id="3">
                                            <span data-i18n="Tail Free Sampling">Tail Free Sampling</span>
                                            <small>3</small>
                                            <div class="toggle_button right_menu_button"></div>
                                        </div>
                                        <div data-id="4">
                                            <span data-i18n="Top A Sampling">Top A Sampling</span>
                                            <small>4</small>
                                            <div class="toggle_button right_menu_button"></div>
                                        </div>
                                        <div data-id="5">
                                            <span data-i18n="Typical P">Typical P</span>
                                            <small>5</small>
                                            <div class="toggle_button right_menu_button"></div>
                                        </div>
                                        <div data-id="6">
                                            <span data-i18n="CFG">CFG</span>
                                            <small>6</small>
                                            <div class="toggle_button right_menu_button"></div>
                                        </div>
                                        <!-- Yes, there is no 7. It was a removed Top G sampling. RIP. -->
                                        <div data-id="8">
                                            <span data-i18n="Mirostat">Mirostat</span>
                                            <small>8</small>
                                            <div class="toggle_button right_menu_button"></div>
                                        </div>
                                    </div>
                                </div>
                            </div><!-- end of novel settings-->
                            <div id="textgenerationwebui_api-settings">
                                <div data-newbie-hidden class="flex-container justifyCenter">
                                    <small class="flex-container alignitemscenter">
                                        <div id="samplerResetButton" class="menu_button whitespacenowrap" data-i18n="Neutralize Samplers">Neutralize Samplers</div>
                                        <div class="fa-solid fa-circle-info opacity50p" title="Set all samplers to their neutral/disabled state." data-i18n="[title]Set all samplers to their neutral/disabled state."></div>
                                    </small>

                                    <small class="flex-container alignitemscenter">
                                        <div id="samplerSelectButton" class="menu_button whitespacenowrap" data-i18n="Sampler Select">Sampler Select</div>
                                        <div class="fa-solid fa-circle-info opacity50p" title="Customize displayed samplers or add custom samplers." data-i18n="[title]Customize displayed samplers or add custom samplers."></div>
                                    </small>
                                </div>
                                <div data-newbie-hidden data-tg-type="mancer, vllm, aphrodite, tabby, infermaticai" class="flex-container flexFlowColumn alignitemscenter flexBasis100p flexGrow flexShrink gap0">
                                    <small data-i18n="Multiple swipes per generation">Multiple swipes per generation</small>
                                    <input type="number" id="n_textgenerationwebui" class="text_pole textAlignCenter" min="1" value="1" step="1" />
                                </div>
                                <div class="flex-container gap10h5v justifyCenter">
                                    <div class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small>
                                            <span data-i18n="Temperature">Temperature</span>
                                            <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]Temperature controls the randomness in token selection" title="Temperature controls the randomness in token selection:&#13;- low temperature (<1.0) leads to more predictable text, favoring higher probability tokens.&#13;- high temperature (>1.0) increases creativity and diversity in the output by giving lower probability tokens a better chance.&#13;Set to 1.0 for the original probabilities."></div>
                                        </small>
                                        <input class="neo-range-slider" type="range" id="temp_textgenerationwebui" name="volume" min="0.0" max="5.0" step="0.01" x-setting-id="temp">
                                        <input class="neo-range-input" type="number" min="0.0" max="5.0" step="0.01" data-for="temp_textgenerationwebui" id="temp_counter_textgenerationwebui">
                                    </div>
                                    <div data-newbie-hidden class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small>
                                            <span data-i18n="Top K">Top K</span>
                                            <div class="fa-solid fa-circle-info opacity50p" title="Top K sets a maximum amount of top tokens that can be chosen from.&#13;E.g Top K is 20, this means only the 20 highest ranking tokens will be kept (regardless of their probabilities being diverse or limited).&#13;Set to 0 (or -1, depending on your backend) to disable." data-i18n="[title]Top_K_desc"></div>
                                        </small>
                                        <input class="neo-range-slider" type="range" id="top_k_textgenerationwebui" name="volume" min="-1" max="200" step="1">
                                        <input class="neo-range-input" type="number" min="-1" max="200" step="1" data-for="top_k_textgenerationwebui" id="top_k_counter_textgenerationwebui">
                                    </div>
                                    <div data-newbie-hidden class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small>
                                            <span data-i18n="Top P">Top P</span>
                                            <div class="fa-solid fa-circle-info opacity50p" title="Top P (a.k.a. nucleus sampling) adds up all the top tokens required to add up to the target percentage.&#13;E.g If the Top 2 tokens are both 25%, and Top P is 0.50, only the Top 2 tokens are considered.&#13;Set to 1.0 to disable." data-i18n="[title]Top_P_desc"></div>
                                        </small>
                                        <input class="neo-range-slider" type="range" id="top_p_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
                                        <input class="neo-range-input" type="number" min="0" max="1" step="0.01" data-for="top_p_textgenerationwebui" id="top_p_counter_textgenerationwebui">
                                    </div>
                                    <div data-newbie-hidden class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small>
                                            <span data-i18n="Typical P">Typical P</span>
                                            <div class="fa-solid fa-circle-info opacity50p" title="Typical P Sampling prioritizes tokens based on their deviation from the average entropy of the set.&#13;It maintains tokens whose cumulative probability is close to a predefined threshold (e.g., 0.5), emphasizing those with average information content.&#13;Set to 1.0 to disable." data-i18n="[title]Typical_P_desc"></div>
                                        </small>
                                        <input class="neo-range-slider" type="range" id="typical_p_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
                                        <input class="neo-range-input" type="number" min="0" max="1" step="0.01" data-for="typical_p_textgenerationwebui" id="typical_p_counter_textgenerationwebui">
                                    </div>
                                    <div class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small>
                                            <span data-i18n="Min P">Min P</span>
                                            <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]Min_P_desc" title="Min P sets a base minimum probability. This is scaled according to the top token's probability.&#13;E.g If Top token is 80% probability, and Min P is 0.1, only tokens higher than 8% would be considered.&#13;Set to 0 to disable."></div>
                                        </small>
                                        <input class="neo-range-slider" type="range" id="min_p_textgenerationwebui" name="volume" min="0" max="1" step="0.001">
                                        <input class="neo-range-input" type="number" min="0" max="1" step="0.001" data-for="min_p_textgenerationwebui" id="min_p_counter_textgenerationwebui">
                                    </div>
                                    <div data-newbie-hidden class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small>
                                            <span data-i18n="Top A">Top A</span>
                                            <div class="fa-solid fa-circle-info opacity50p" title="Top A sets a threshold for token selection based on the square of the highest token probability.&#13;E.g if the Top-A value is 0.2 and the top token's probability is 50%, tokens with probabilities below 5% (0.2 * 0.5^2) are excluded.&#13;Set to 0 to disable." data-i18n="[title]Top_A_desc"></div>
                                        </small>
                                        <input class="neo-range-slider" type="range" id="top_a_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
                                        <input class="neo-range-input" type="number" min="0" max="1" step="0.01" data-for="top_a_textgenerationwebui" id="top_a_counter_textgenerationwebui">
                                    </div>
                                    <div data-newbie-hidden class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small>
                                            <span data-i18n="TFS">TFS</span>
                                            <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]Tail_Free_Sampling_desc" title="Tail-Free Sampling (TFS) searches for a tail of low-probability tokens in the distribution,&#13;by analyzing the rate of change in token probabilities using derivatives. It retains tokens up to a threshold (e.g., 0.3) based on the normalized second derivative.&#13;The closer to 0, the more discarded tokens. Set to 1.0 to disable."></div>
                                        </small>
                                        <input class="neo-range-slider" type="range" id="tfs_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
                                        <input class="neo-range-input" type="number" min="0" max="1" step="0.01" data-for="tfs_textgenerationwebui" id="tfs_counter_textgenerationwebui">
                                    </div>
                                    <div data-newbie-hidden data-tg-type="ooba,mancer" class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small>
                                            <span data-i18n="Epsilon Cutoff">Epsilon Cutoff</span>
                                            <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]Epsilon cutoff sets a probability floor below which tokens are excluded from being sampled" title="Epsilon cutoff sets a probability floor below which tokens are excluded from being sampled.&#13;In units of 1e-4; a reasonable value is 3.&#13;Set to 0 to disable."></div>
                                        </small>
                                        <input class="neo-range-slider" type="range" id="epsilon_cutoff_textgenerationwebui" name="volume" min="0" max="9" step="0.01">
                                        <input class="neo-range-input" type="number" min="0" max="9" step="0.01" data-for="epsilon_cutoff_textgenerationwebui" id="epsilon_cutoff_counter_textgenerationwebui">
                                    </div>
                                    <div data-newbie-hidden data-tg-type="ooba,mancer" class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small>
                                            <span data-i18n="Eta Cutoff">Eta Cutoff</span>
                                            <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]Eta_Cutoff_desc" title="Eta cutoff is the main parameter of the special Eta Sampling technique.&#13;In units of 1e-4; a reasonable value is 3.&#13;Set to 0 to disable.&#13;See the paper Truncation Sampling as Language Model Desmoothing by Hewitt et al. (2022) for details."></div>
                                        </small>
                                        <input class="neo-range-slider" type="range" id="eta_cutoff_textgenerationwebui" name="volume" min="0" max="20" step="0.01">
                                        <input class="neo-range-input" type="number" min="0" max="20" step="0.01" data-for="eta_cutoff_textgenerationwebui" id="eta_cutoff_counter_textgenerationwebui">
                                    </div>
                                    <div class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small data-i18n="rep.pen">Repetition Penalty</small>
                                        <input class="neo-range-slider" type="range" id="rep_pen_textgenerationwebui" name="volume" min="1" max="3" step="0.01">
                                        <input class="neo-range-input" type="number" min="1" max="3" step="0.01" data-for="rep_pen_textgenerationwebui" id="rep_pen_counter_textgenerationwebui">
                                    </div>
                                    <div data-tg-type="ooba, koboldcpp, tabby, ollama, llamacpp" class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small data-i18n="rep.pen range">Rep Pen Range</small>
                                        <input class="neo-range-slider" type="range" id="rep_pen_range_textgenerationwebui" name="volume" min="-1" max="8192" step="1">
                                        <input class="neo-range-input" type="number" min="-1" max="8192" step="1" data-for="rep_pen_range_textgenerationwebui" id="rep_pen_range_counter_textgenerationwebui">
                                    </div>
                                    <div data-tg-type="koboldcpp" class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small data-i18n="Rep. Pen. Slope">Rep Pen Slope</small>
                                        <input class="neo-range-slider" type="range" id="rep_pen_slope_textgenerationwebui" name="volume" min="0" max="10" step="0.01">
                                        <input class="neo-range-input" type="number" min="0" max="10" step="0.01" data-for="rep_pen_slope_textgenerationwebui" id="rep_pen_slope_counter_textgenerationwebui">
                                    </div>
                                    <div data-tg-type="tabby" class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small data-i18n="rep.pen decay">Rep Pen Decay</small>
                                        <input class="neo-range-slider" type="range" id="rep_pen_decay_textgenerationwebui" name="volume" min="-1" max="8192" step="1">
                                        <input class="neo-range-input" type="number" min="-1" max="8192" step="1" data-for="rep_pen_decay_textgenerationwebui" id="rep_pen_decay_counter_textgenerationwebui">
                                    </div>
                                    <div data-tg-type="ooba" data-newbie-hidden class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small data-i18n="Encoder Rep. Pen.">Encoder Penalty</small>
                                        <input class="neo-range-slider" type="range" id="encoder_rep_pen_textgenerationwebui" name="volume" min="0.8" max="1.5" step="0.01" />
                                        <input class="neo-range-input" type="number" min="0.8" max="1.5" step="0.01" data-for="encoder_rep_pen_textgenerationwebui" id="encoder_rep_pen_counter_textgenerationwebui">
                                    </div>
                                    <div data-newbie-hidden class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small data-i18n="Frequency Penalty">Frequency Penalty</small>
                                        <input class="neo-range-slider" type="range" id="freq_pen_textgenerationwebui" name="volume" min="-2" max="2" step="0.01" />
                                        <input class="neo-range-input" type="number" data-for="freq_pen_textgenerationwebui" min="-2" max="2" step="0.01" id="freq_pen_counter_textgenerationwebui">
                                    </div>
                                    <div data-newbie-hidden class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small data-i18n="Presence Penalty">Presence Penalty</small>
                                        <input class="neo-range-slider" type="range" id="presence_pen_textgenerationwebui" name="volume" min="-2" max="2" step="0.01" />
                                        <input class="neo-range-input" type="number" min="-2" max="2" step="0.01" data-for="presence_pen_textgenerationwebui" id="presence_pen_counter_textgenerationwebui">
                                    </div>
                                    <div data-tg-type="ooba" data-newbie-hidden class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small data-i18n="No Repeat Ngram Size">No Repeat Ngram Size</small>
                                        <input class="neo-range-slider" type="range" id="no_repeat_ngram_size_textgenerationwebui" name="volume" min="0" max="20" step="1">
                                        <input class="neo-range-input" type="number" min="0" max="20" step="1" data-for="no_repeat_ngram_size_textgenerationwebui" id="no_repeat_ngram_size_counter_textgenerationwebui">
                                    </div>
                                    <div data-newbie-hidden data-tg-type="tabby" class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small data-i18n="Skew">Skew</small>
                                        <input class="neo-range-slider" type="range" id="skew_textgenerationwebui" name="volume" min="-5" max="5" step="0.01" />
                                        <input class="neo-range-input" type="number" min="-5" max="5" step="0.01" data-for="skew_textgenerationwebui" id="skew_counter_textgenerationwebui">
                                    </div>
                                    <div data-newbie-hidden data-tg-type="mancer, ooba, tabby, dreamgen, infermaticai" class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small data-i18n="Min Length">Min Length</small>
                                        <input class="neo-range-slider" type="range" id="min_length_textgenerationwebui" name="volume" min="0" max="2000" step="1" />
                                        <input class="neo-range-input" type="number" min="0" max="2000" step="1" data-for="min_length_textgenerationwebui" id="min_length_counter_textgenerationwebui">
                                    </div>
                                    <div data-newbie-hidden data-tg-type="ooba" class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                        <small data-i18n="Max Tokens Second">Maximum tokens/second</small>
                                        <input class="neo-range-slider" type="range" id="max_tokens_second_textgenerationwebui" name="volume" min="0" max="20" step="1" />
                                        <input class="neo-range-input" type="number" min="0" max="20" step="1" data-for="max_tokens_second_textgenerationwebui" id="max_tokens_second_counter_textgenerationwebui">
                                    </div>
                                    <div data-newbie-hidden data-tg-type="mancer, ooba, koboldcpp, aphrodite, tabby" id="smoothingBlock" name="smoothingBlock" class="wide100p">
                                        <h4 class="wide100p textAlignCenter">
                                            <label data-i18n="Smooth Sampling">Smooth Sampling</label>
                                            <div class=" fa-solid fa-circle-info opacity50p " data-i18n="[title]Smooth_Sampling_desc" title="Allows you to use quadratic/cubic transformations to adjust the distribution. Lower Smoothing Factor values will be more creative, usually between 0.2-0.3 is the sweetspot (assuming the curve = 1). Higher Smoothing Curve values will make the curve steeper, which will punish low probability choices more aggressively. 1.0 curve is equivalent to only using Smoothing Factor."></div>
                                        </h4>
                                        <div data-tg-type="mancer, ooba, koboldcpp, aphrodite, tabby" class="flex-container flexFlowRow gap10px flexShrink">
                                            <div data-newbie-hidden class="alignitemscenter flex-container flexFlowColumn flexBasis48p flexGrow flexShrink gap0">
                                                <small data-i18n="Smoothing Factor">Smoothing Factor</small>
                                                <input class="neo-range-slider" type="range" id="smoothing_factor_textgenerationwebui" name="volume" min="0" max="10" step="0.01" />
                                                <input class="neo-range-input" type="number" min="0" max="10" step="0.01" data-for="smoothing_factor_textgenerationwebui" id="smoothing_factor_counter_textgenerationwebui">
                                            </div>
                                            <div data-tg-type="mancer, ooba, koboldcpp, aphrodite" data-newbie-hidden class="alignitemscenter flex-container flexFlowColumn flexBasis48p flexGrow flexShrink gap0">
                                                <small data-i18n="Smoothing Curve">Smoothing Curve</small>
                                                <input class="neo-range-slider" type="range" id="smoothing_curve_textgenerationwebui" name="volume" min="1" max="10" step="0.01" />
                                                <input class="neo-range-input" type="number" min="1" max="10" step="0.01" data-for="smoothing_curve_textgenerationwebui" id="smoothing_curve_counter_textgenerationwebui">
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Enable for llama.cpp when the PR is merged: https://github.com/ggerganov/llama.cpp/pull/6839 -->
                                    <div data-newbie-hidden data-tg-type="ooba, koboldcpp" id="dryBlock" class="wide100p">
                                        <h4 class="wide100p textAlignCenter" title="DRY penalizes tokens that would extend the end of the input into a sequence that has previously occurred in the input. Set multiplier to 0 to disable." data-i18n="[title]DRY_Repetition_Penalty_desc">
                                            <label data-i18n="DRY Repetition Penalty">DRY Repetition Penalty</label>
                                            <a href="https://github.com/oobabooga/text-generation-webui/pull/5677" target="_blank">
                                                <div class=" fa-solid fa-circle-info opacity50p"></div>
                                            </a>
                                        </h4>
                                        <div class="flex-container flexFlowRow gap10px flexShrink">
                                            <div class="alignitemscenter flex-container flexFlowColumn flexBasis48p flexGrow flexShrink gap0" title="Set to value > 0 to enable DRY. Controls the magnitude of the penalty for the shortest penalized sequences." data-i18n="[title]DRY_Multiplier_desc">
                                                <small data-i18n="Multiplier">Multiplier</small>
                                                <input class="neo-range-slider" type="range" id="dry_multiplier_textgenerationwebui" min="0" max="5" step="0.01" />
                                                <input class="neo-range-input" type="number" min="0" max="5" step="0.01" data-for="dry_multiplier_textgenerationwebui" id="dry_multiplier_counter_textgenerationwebui">
                                            </div>
                                            <div class="alignitemscenter flex-container flexFlowColumn flexBasis48p flexGrow flexShrink gap0" title="Controls how fast the penalty grows with increasing sequence length." data-i18n="[title]DRY_Base_desc">
                                                <small data-i18n="Base">Base</small>
                                                <input class="neo-range-slider" type="range" id="dry_base_textgenerationwebui" min="1" max="4" step="0.01" />
                                                <input class="neo-range-input" type="number" min="1" max="4" step="0.01" data-for="dry_base_textgenerationwebui" id="dry_base_counter_textgenerationwebui">
                                            </div>
                                            <div class="alignitemscenter flex-container flexFlowColumn flexBasis48p flexGrow flexShrink gap0" title="Longest sequence that can be repeated without being penalized." data-i18n="[title]DRY_Allowed_Length_desc">
                                                <small data-i18n="Allowed Length">Allowed Length</small>
                                                <input class="neo-range-slider" type="range" id="dry_allowed_length_textgenerationwebui" min="1" max="20" step="1" />
                                                <input class="neo-range-input" type="number" min="1" max="20" step="1" data-for="dry_allowed_length_textgenerationwebui" id="dry_allowed_length_counter_textgenerationwebui">
                                            </div>
                                            <div class="alignItemsCenter flex-container flexFlowColumn flexBasis48p flexGrow flexShrink gap0" data-tg-type="llamacpp, koboldcpp">
                                                <small data-i18n="Penalty Range">Penalty Range</small>
                                                <input class="neo-range-slider" type="range" id="dry_penalty_last_n_textgenerationwebui" min="0" max="8192" step="1" />
                                                <input class="neo-range-input" type="number" min="0" max="8192" step="1" data-for="dry_penalty_last_n_textgenerationwebui" id="dry_penalty_last_n_counter_textgenerationwebui">
                                            </div>
                                        </div>
                                        <div class="range-block marginTop5" title="Tokens across which sequence matching is not continued. Specified as a comma-separated list of quoted strings." data-i18n="[title]DRY_Sequence_Breakers_desc">
                                            <div class="range-block-title textAlignCenter">
                                                <small data-i18n="Sequence Breakers">Sequence Breakers</small>
                                            </div>
                                            <div class="wide100p">
                                                <textarea id="dry_sequence_breakers_textgenerationwebui" class="text_pole textarea_compact" name="sequence_breakers" rows="3" data-i18n="[placeholder]JSON-serialized array of strings." placeholder="JSON-serialized array of strings."></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div data-newbie-hidden data-tg-type="ooba, mancer, koboldcpp, tabby, llamacpp, aphrodite" id="dynatemp_block_ooba" class="wide100p">
                                        <h4 class="wide100p textAlignCenter">
                                            <div class="flex-container alignitemscenter justifyCenter">
                                                <div class="checkbox_label" for="dynatemp_textgenerationwebui">
                                                    <input type="checkbox" id="dynatemp_textgenerationwebui" />
                                                </div>
                                                <span class="textAlignCenter" data-i18n="Dynamic Temperature">Dynamic Temperature</span>
                                                <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]Scale Temperature dynamically per token, based on the variation of probabilities" title="Scale Temperature dynamically per token, based on the variation of probabilities."></div>
                                            </div>
                                        </h4>
                                        <div class="flex-container flexFlowRow alignitemscenter gap10px flexShrink">
                                            <div class="alignitemscenter flex-container marginBot5 flexFlowColumn flexGrow flexShrink gap0">
                                                <small data-i18n="Minimum Temp">Minimum Temp</small>
                                                <input class="neo-range-slider" type="range" id="min_temp_textgenerationwebui" name="volume" min="0" max="5" step="0.01" />
                                                <input class="neo-range-input" type="number" min="0" max="5" step="0.01" data-for="min_temp_textgenerationwebui" id="min_temp_counter_textgenerationwebui">
                                            </div>
                                            <div class="alignitemscenter flex-container marginBot5 flexFlowColumn flexGrow flexShrink gap0">
                                                <small data-i18n="Maximum Temp">Maximum Temp</small>
                                                <input class="neo-range-slider" type="range" id="max_temp_textgenerationwebui" name="volume" min="0" max="5" step="0.01" />
                                                <input class="neo-range-input" type="number" min="0" max="5" step="0.01" data-for="max_temp_textgenerationwebui" id="max_temp_counter_textgenerationwebui">
                                            </div>
                                            <div class="alignitemscenter flex-container marginBot5 flexFlowColumn flexGrow flexShrink gap0">
                                                <small data-i18n="Exponent">Exponent</small>
                                                <input class="neo-range-slider" type="range" id="dynatemp_exponent_textgenerationwebui" name="volume" min="0.01" max="10" step="0.01" />
                                                <input class="neo-range-input" type="number" min="0.01" max="10" step="0.01" data-for="dynatemp_exponent_textgenerationwebui" id="dynatemp_exponent_counter_textgenerationwebui">
                                            </div>
                                        </div>
                                    </div>
                                    <div data-newbie-hidden data-tg-type="ooba,aphrodite,infermaticai,koboldcpp,llamacpp,mancer,ollama,tabby" id="mirostat_block_ooba" class="wide100p">
                                        <h4 class="wide100p textAlignCenter">
                                            <label data-i18n="Mirostat (mode=1 is only for llama.cpp)">Mirostat</label>
                                            <div class=" fa-solid fa-circle-info opacity50p " data-i18n="[title]Mirostat_desc" title="Mirostat is a thermostat for output perplexity.&#13;Mirostat matches the output perplexity to that of the input, thus avoiding the repetition trap&#13;(where, as the autoregressive inference produces text, the perplexity of the output tends toward zero)&#13;and the confusion trap (where the perplexity diverges).&#13;For details, see the paper Mirostat: A Neural Text Decoding Algorithm that Directly Controls Perplexity by Basu et al. (2020).&#13;Mode chooses the Mirostat version. 0=disable, 1=Mirostat 1.0 (llama.cpp only), 2=Mirostat 2.0."></div>
                                        </h4>
                                        <div class="flex-container flexFlowRow gap10px flexShrink">
                                            <div class="alignitemscenter flex-container marginBot5 flexFlowColumn flexGrow flexShrink gap0">
                                                <small data-i18n="Mirostat Mode">Mode</small>
                                                <input class="neo-range-slider" type="range" id="mirostat_mode_textgenerationwebui" name="volume" min="0" max="2" step="1" />
                                                <input class="neo-range-input" type="number" min="0" max="2" step="1" data-for="mirostat_mode_textgenerationwebui" id="mirostat_mode_counter_textgenerationwebui">
                                            </div>
                                            <div class="alignitemscenter flex-container marginBot5 flexFlowColumn flexGrow flexShrink gap0">
                                                <label>
                                                    <small data-i18n="Mirostat Tau">Tau</small>
                                                    <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]Variability parameter for Mirostat outputs" title="Variability parameter for Mirostat outputs."></div>
                                                </label>
                                                <input class="neo-range-slider" type="range" id="mirostat_tau_textgenerationwebui" name="volume" min="0" max="20" step="0.01" />
                                                <input class="neo-range-input" type="number" min="0" max="20" step="0.01" data-for="mirostat_tau_textgenerationwebui" id="mirostat_tau_counter_textgenerationwebui">
                                            </div>
                                            <div class="alignitemscenter flex-container marginBot5 flexFlowColumn flexGrow flexShrink gap0">
                                                <label>
                                                    <small data-i18n="Mirostat Eta">Eta</small>
                                                    <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]Learning rate of Mirostat" title="Learning rate of Mirostat."></div>
                                                </label>
                                                <input class="neo-range-slider" type="range" id="mirostat_eta_textgenerationwebui" name="volume" min="0" max="1" step="0.01" />
                                                <input class="neo-range-input" type="number" min="0" max="1" step="0.01" data-for="mirostat_eta_textgenerationwebui" id="mirostat_eta_counter_textgenerationwebui">
                                            </div>
                                        </div>
                                    </div>
                                    <div data-newbie-hidden data-tg-type="ooba, vllm" id="beamSearchBlock" name="beamSearchBlock" class="wide100p">
                                        <h4 class="wide100p textAlignCenter">
                                            <label>
                                                <span data-i18n="Beam search">Beam Search</span>
                                                <div class=" fa-solid fa-circle-info opacity50p " title="Helpful tip coming soon." data-i18n="[title]Helpful tip coming soon."></div>
                                            </label>
                                        </h4>
                                        <div class="flex-container flexFlowRow alignitemscenter gap10px flexShrink">
                                            <div class="alignitemscenter flex-container marginBot5 flexFlowColumn flexGrow flexShrink gap0">
                                                <small data-i18n="Number of Beams"># of Beams</small>
                                                <input class="neo-range-slider" type="range" id="num_beams_textgenerationwebui" name="volume" min="1" max="20" step="1" />
                                                <input class="neo-range-input" type="number" min="1" max="20" step="1" data-for="num_beams_textgenerationwebui" id="num_beams_counter_textgenerationwebui">
                                            </div>
                                            <div class="alignitemscenter flex-container marginBot5 flexFlowColumn flexGrow flexShrink gap0">
                                                <small data-i18n="Length Penalty">Length Penalty</small>
                                                <input class="neo-range-slider" type="range" id="length_penalty_textgenerationwebui" name="volume" min="-5" max="5" step="0.1" />
                                                <input class="neo-range-input" type="number" min="-5" max="5" step="0.1" data-for="length_penalty_textgenerationwebui" id="length_penalty_counter_textgenerationwebui">
                                            </div>
                                            <div class="">
                                                <label class="checkbox_label" for="early_stopping_textgenerationwebui">
                                                    <input type="checkbox" id="early_stopping_textgenerationwebui" />
                                                    <small data-i18n="Early Stopping">Early Stopping</small>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div data-tg-type="ooba" data-newbie-hidden id="contrastiveSearchBlock" name="contrastiveSearchBlock" class="alignitemscenter flex-container flexFlowColumn flexBasis48p flexGrow flexShrink gap0">
                                        <h4 class="textAlignCenter" data-i18n="Contrastive search">Contrastive Search
                                            <div class=" fa-solid fa-circle-info opacity50p " data-i18n="Contrastive_search_txt" title="A sampler that encourages diversity while maintaining coherence, by exploiting the isotropicity of the representation space of most LLMs. For details, see the paper A Contrastive Framework for Neural Text Generation by Su et al. (2022)."></div>
                                        </h4>
                                        <div class="alignitemscenter flex-container flexFlowColumn wide100p gap0">
                                            <label>
                                                <small data-i18n="Penalty Alpha">Penalty Alpha</small>
                                                <div class="fa-solid fa-circle-info opacity50p " title="Strength of the Contrastive Search regularization term. Set to 0 to disable CS." data-i18n="[title]Strength of the Contrastive Search regularization term. Set to 0 to disable CS"></div>
                                            </label>
                                            <input class="neo-range-slider" type="range" id="penalty_alpha_textgenerationwebui" name="volume" min="0" max="5" step="0.05" />
                                            <input class="neo-range-input" type="number" min="0" max="5" step="0.05" data-for="penalty_alpha_textgenerationwebui" id="penalty_alpha_counter_textgenerationwebui">
                                        </div>
                                    </div>
                                    <div data-newbie-hidden name="checkboxes" class="flex-container flexBasis48p justifyCenter flexGrow flexShrink ">
                                        <div class="flex-container flexFlowColumn marginTop5">
                                            <label data-tg-type="ooba" class="checkbox_label  flexGrow flexShrink" for="do_sample_textgenerationwebui">
                                                <input type="checkbox" id="do_sample_textgenerationwebui" />
                                                <small data-i18n="Do Sample">Do Sample</small>
                                            </label>
                                            <label data-tg-type="ooba, tabby" class="checkbox_label  flexGrow flexShrink" for="add_bos_token_textgenerationwebui">
                                                <input type="checkbox" id="add_bos_token_textgenerationwebui" />
                                                <label>
                                                    <small data-i18n="Add BOS Token">Add BOS Token</small>
                                                    <div class="fa-solid fa-circle-info opacity50p " data-i18n="[title]Add the bos_token to the beginning of prompts. Disabling this can make the replies more creative" title="Add the bos_token to the beginning of prompts. Disabling this can make the replies more creative."></div>
                                                </label>
                                            </label>
                                            <label data-tg-type="ooba, llamacpp, tabby" class="checkbox_label  flexGrow flexShrink" for="ban_eos_token_textgenerationwebui">
                                                <input type="checkbox" id="ban_eos_token_textgenerationwebui" />
                                                <label>
                                                    <small data-i18n="Ban EOS Token">Ban EOS Token</small>
                                                    <div class="fa-solid fa-circle-info opacity50p " data-i18n="[title]Ban the eos_token. This forces the model to never end the generation prematurely" title="Ban the eos_token. This forces the model to never end the generation prematurely."></div>
                                                </label>
                                            </label>
                                            <label data-tg-type="vllm, aphrodite, infermaticai" class="checkbox_label" for="ignore_eos_token_textgenerationwebui">
                                                <input type="checkbox" id="ignore_eos_token_textgenerationwebui" />
                                                <small data-i18n="Ignore EOS Token">Ignore EOS Token
                                                    <div class="fa-solid fa-circle-info opacity50p " data-i18n="[title]Ignore the EOS Token even if it generates." title="Ignore the EOS Token even if it generates."></div>
                                                </small>
                                            </label>
                                            <label class="checkbox_label flexGrow flexShrink" for="skip_special_tokens_textgenerationwebui">
                                                <input type="checkbox" id="skip_special_tokens_textgenerationwebui" />
                                                <small data-i18n="Skip Special Tokens">Skip Special Tokens</small>
                                            </label>
                                            <label data-tg-type="ooba, aphrodite, tabby" class="checkbox_label  flexGrow flexShrink" for="temperature_last_textgenerationwebui">
                                                <input type="checkbox" id="temperature_last_textgenerationwebui" />
                                                <label>
                                                    <small data-i18n="Temperature Last">Temperature Last</small>
                                                    <div class="fa-solid fa-circle-info opacity50p " data-i18n="[title]Temperature_Last_desc" title="Use the temperature sampler last. This is almost always the sensible thing to do.&#13;When enabled: sample the set of plausible tokens first, then apply temperature to adjust their relative probabilities (technically, logits).&#13;When disabled: apply temperature to adjust the relative probabilities of ALL tokens first, then sample plausible tokens from that.&#13;Disabling Temperature Last boosts the probabilities in the tail of the distribution, which tends to amplify the chances of getting an incoherent response."></div>
                                                </label>
                                            </label>
                                            <label data-tg-type="tabby" class="checkbox_label  flexGrow flexShrink" for="speculative_ngram_textgenerationwebui">
                                                <input type="checkbox" id="speculative_ngram_textgenerationwebui" />
                                                <label>
                                                    <small data-i18n="Speculative Ngram">Speculative Ngram</small>
                                                    <div class="fa-solid fa-circle-info opacity50p " data-i18n="[title]Use a different speculative decoding method without a draft model" title="Use a different speculative decoding method without a draft model.&#13;Using a draft model is preferred. Speculative ngram is not as effective."></div>
                                                </label>
                                            </label>

                                            <label data-tg-type="vllm, aphrodite, infermaticai" class="checkbox_label" for="spaces_between_special_tokens_textgenerationwebui">
                                                <input type="checkbox" id="spaces_between_special_tokens_textgenerationwebui" />
                                                <small data-i18n="Spaces Between Special Tokens">Spaces Between Special Tokens</small>
                                            </label>
                                        </div>
                                    </div>
                                    <div data-tg-type="mancer, ooba, koboldcpp, vllm, aphrodite, llamacpp, ollama, infermaticai, huggingface" data-newbie-hidden class="flex-container flexFlowColumn alignitemscenter flexBasis48p flexGrow flexShrink gap0">
                                        <small data-i18n="Seed" class="textAlignCenter">Seed</small>
                                        <input type="number" id="seed_textgenerationwebui" class="text_pole textAlignCenter" min="-1" value="-1" maxlength="100" />
                                    </div>
                                    <div id="banned_tokens_block_ooba" data-newbie-hidden class="wide100p">
                                        <hr data-newbie-hidden class="width100p">
                                        <h4 class="range-block-title justifyCenter">
                                            <span data-i18n="Banned Tokens">Banned Tokens</span>
                                            <div class="margin5 fa-solid fa-circle-info opacity50p " data-i18n="[title]LLaMA / Mistral / Yi models only" title="LLaMA / Mistral / Yi models only. Make sure to select an appropriate tokenizer first.&#13;Sequences you don't want to appear in the output.&#13;One per line. Text or [token ids].&#13;Most tokens have a leading space. Use token counter if unsure."></div>
                                        </h4>
                                        <div class="wide100p">
                                            <textarea id="banned_tokens_textgenerationwebui" class="text_pole textarea_compact" name="banned_tokens_textgenerationwebui" rows="3" data-i18n="[placeholder]Example: some text [42, 69, 1337]" placeholder="Example:&#10;some text&#10;[42, 69, 1337]"></textarea>
                                        </div>
                                    </div>
                                    <div class="range-block wide100p">
                                        <div id="logit_bias_textgenerationwebui" class="range-block-title title_restorable">
                                            <span data-i18n="Logit Bias">Logit Bias</span>
                                            <div id="textgen_logit_bias_new_entry" class="menu_button menu_button_icon">
                                                <i class="fa-xs fa-solid fa-plus"></i>
                                                <small data-i18n="Add">Add</small>
                                            </div>
                                        </div>
                                        <div class="toggle-description justifyLeft" data-i18n="Helps to ban or reenforce the usage of certain words">
                                            Helps to ban or reinforce the usage of certain tokens.
                                        </div>
                                        <div class="flex-container flexFlowColumn wide100p">
                                            <div class="logit_bias_list"></div>
                                        </div>
                                    </div>
                                    <div id="cfg_block_ooba" data-newbie-hidden data-tg-type="ooba, tabby" class="wide100p">
                                        <hr class="width100p">
                                        <h4 data-i18n="CFG" class="textAlignCenter">CFG
                                            <div class="margin5 fa-solid fa-circle-info opacity50p " data-i18n="[title]Classifier Free Guidance. More helpful tip coming soon" title="Classifier Free Guidance. More helpful tip coming soon."></div>
                                        </h4>
                                        <div class="alignitemscenter flex-container flexFlowColumn flexShrink gap0">
                                            <small data-i18n="Scale">Scale</small>
                                            <input class="neo-range-slider" type="range" id="guidance_scale_textgenerationwebui" name="volume" min="0.1" max="4" step="0.05">
                                            <input class="neo-range-input" type="number" min="0.1" max="4" step="0.05" data-for="guidance_scale_textgenerationwebui" id="guidance_scale_counter_textgenerationwebui">
                                        </div>
                                        <div class="range-block">
                                            <div class="range-block-title justifyLeft">
                                                <span data-i18n="Negative Prompt">Negative Prompt</span>
                                                <small>
                                                    <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]Used if CFG Scale is unset globally, per chat or character" title="Used if CFG Scale is unset globally, per chat or character"></div>
                                                </small>
                                            </div>
                                            <div class="wide100p">
                                                <textarea id="negative_prompt_textgenerationwebui" class="text_pole textarea_compact" name="negative_prompt" rows="3" data-i18n="[placeholder]Add text here that would make the AI generate things you don't want in your outputs." placeholder="Add text here that would make the AI generate things you don't want in your outputs."></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div data-newbie-hidden id="json_schema_block" data-tg-type="tabby, llamacpp" class="wide100p">
                                        <hr class="wide100p">
                                        <h4 class="wide100p textAlignCenter"><span data-i18n="JSON Schema">JSON Schema</span>
                                            <a href="https://json-schema.org/learn/getting-started-step-by-step" target="_blank">
                                                <small>
                                                    <div class="fa-solid fa-circle-question note-link-span"></div>
                                                </small>
                                            </a>
                                        </h4>
                                        <textarea id="tabby_json_schema" rows="4" class="text_pole textarea_compact monospace" data-i18n="[placeholder]Type in the desired JSON schema" placeholder="Type in the desired JSON schema"></textarea>
                                    </div>
                                    <div data-newbie-hidden id="grammar_block_ooba" class="wide100p">
                                        <hr class="wide100p">
                                        <h4 class="wide100p textAlignCenter">
                                            <label>
                                                <span data-i18n="Grammar String">Grammar String</span>
                                                <div class="margin5 fa-solid fa-circle-info opacity50p " data-i18n="[title]GBNF or EBNF, depends on the backend in use. If you're using this you should know which." title="GBNF or EBNF, depends on the backend in use. If you're using this you should know which."></div>
                                                <a href="https://github.com/ggerganov/llama.cpp/blob/master/grammars/README.md" target="_blank">
                                                    <small>
                                                        <div class="fa-solid fa-up-right-from-square note-link-span"></div>
                                                    </small>
                                                </a>
                                            </label>
                                        </h4>
                                        <textarea id="grammar_string_textgenerationwebui" rows="4" class="text_pole textarea_compact monospace" data-i18n="[placeholder]Type in the desired custom grammar" placeholder="Type in the desired custom grammar"></textarea>
                                    </div>
                                    <div id="sampler_order_block_kcpp" data-newbie-hidden data-tg-type="koboldcpp" class="range-block flexFlowColumn wide100p">
                                        <hr class="wide100p">
                                        <div class="range-block-title">
                                            <span data-i18n="Samplers Order">Samplers Order</span>
                                        </div>
                                        <div class="toggle-description widthUnset" data-i18n="Samplers will be applied in a top-down order. Use with caution.">
                                            kcpp only. Samplers will be applied in a top-down order.
                                            Use with caution.
                                        </div>
                                        <div id="koboldcpp_order" class="prompt_order">
                                            <div data-id="0">
                                                <span data-i18n="Top K">Top K</span>
                                                <small>0</small>
                                            </div>
                                            <div data-id="1">
                                                <span data-i18n="Top A">Top A</span>
                                                <small>1</small>
                                            </div>
                                            <div data-id="2">
                                                <span data-i18n="Top P & Min P">Top P & Min P</span>
                                                <small>2</small>
                                            </div>
                                            <div data-id="3">
                                                <span data-i18n="Tail Free Sampling">Tail Free Sampling</span>
                                                <small>3</small>
                                            </div>
                                            <div data-id="4">
                                                <span data-i18n="Typical P">Typical P</span>
                                                <small>4</small>
                                            </div>
                                            <div data-id="5">
                                                <span data-i18n="Temperature">Temperature</span>
                                                <small>5</small>
                                            </div>
                                            <div data-id="6">
                                                <span data-i18n="Repetition Penalty">Repetition Penalty</span>
                                                <small>6</small>
                                            </div>
                                        </div>
                                        <div id="koboldcpp_default_order" class="menu_button menu_button_icon">
                                            <span data-i18n="Load default order">Load default order</span>
                                        </div>
                                    </div>
                                    <div id="sampler_order_block_lcpp" data-newbie-hidden data-tg-type="llamacpp" class="range-block flexFlowColumn wide100p">
                                        <hr class="wide100p">
                                        <h4 class="range-block-title justifyCenter">
                                            <span data-i18n="Sampler Order">Sampler Order</span>
                                            <div class="margin5 fa-solid fa-circle-info opacity50p" data-i18n="[title]llama.cpp only. Determines the order of samplers. If Mirostat mode is not 0, sampler order is ignored." title="llama.cpp only. Determines the order of samplers. If Mirostat mode is not 0, sampler order is ignored."></div>
                                        </h4>
                                        <div class="toggle-description widthUnset" data-i18n="llama.cpp only. Determines the order of samplers. If Mirostat mode is not 0, sampler order is ignored.">
                                            llama.cpp only. Determines the order of samplers. If Mirostat mode is not 0, sampler order is ignored.
                                        </div>
                                        <div id="llamacpp_samplers_sortable" class="prompt_order">
                                            <div data-name="temperature" draggable="true"><span>Temperature</span><small></small></div>
                                            <div data-name="top_k" draggable="true"><span>Top K</span><small></small></div>
                                            <div data-name="top_p" draggable="true"><span>Top P</span><small></small></div>
                                            <div data-name="typical_p" draggable="true"><span>Typical P</span><small></small></div>
                                            <div data-name="tfs_z" draggable="true"><span>Tail Free Sampling</span><small></small></div>
                                            <div data-name="min_p" draggable="true"><span>Min P</span><small></small></div>
                                        </div>
                                        <div id="llamacpp_samplers_default_order" class="menu_button menu_button_icon">
                                            <span data-i18n="Load default order">Load default order</span>
                                        </div>
                                    </div>
                                    <div id="sampler_priority_block_ooba" data-newbie-hidden data-tg-type="ooba" class="range-block flexFlowColumn wide100p">
                                        <hr class="wide100p">
                                        <h4 class="range-block-title justifyCenter">
                                            <span data-i18n="Sampler Priority">Sampler Priority</span>
                                            <div class="margin5 fa-solid fa-circle-info opacity50p" title="Ooba only. Determines the order of samplers." data-i18n="[title]Ooba only. Determines the order of samplers."></div>
                                        </h4>
                                        <div class="toggle-description widthUnset" data-i18n="Ooba only. Determines the order of samplers.">
                                            Ooba only. Determines the order of samplers.
                                        </div>
                                        <div id="sampler_priority_container" class="prompt_order">
                                            <div data-name="temperature" draggable="true"><span>Temperature</span><small></small></div>
                                            <div data-name="dynamic_temperature" draggable="true"><span>Dynamic Temperature</span><small></small></div>
                                            <div data-name="quadratic_sampling" draggable="true"><span>Quadratic / Smooth Sampling</span><small></small></div>
                                            <div data-name="top_k" draggable="true"><span>Top K</span><small></small></div>
                                            <div data-name="top_p" draggable="true"><span>Top P</span><small></small></div>
                                            <div data-name="typical_p" draggable="true"><span>Typical P</span><small></small></div>
                                            <div data-name="epsilon_cutoff" draggable="true"><span>Epsilon Cutoff</span><small></small></div>
                                            <div data-name="eta_cutoff" draggable="true"><span>Eta Cutoff</span><small></small></div>
                                            <div data-name="tfs" draggable="true"><span>Tail Free Sampling</span><small></small></div>
                                            <div data-name="top_a" draggable="true"><span>Top A</span><small></small></div>
                                            <div data-name="min_p" draggable="true"><span>Min P</span><small></small></div>
                                            <div data-name="mirostat" draggable="true"><span>Mirostat</span><small></small></div>
                                        </div>
                                        <div id="textgenerationwebui_default_order" class="menu_button menu_button_icon">
                                            <span data-i18n="Load default order">Load default order</span>
                                        </div>
                                    </div>
                                </div>
                            </div><!-- end of textgen settings-->
                            <div id="openai_settings">
                                <div class="">
                                    <div class="inline-drawer wide100p flexFlowColumn">
                                        <div class="inline-drawer-toggle inline-drawer-header">
                                            <div class="flex-container alignItemsCenter flexNoGap">
                                                <b data-i18n="Character Names Behavior">Character Names Behavior</b>
                                                <span title="Helps the model to associate messages with characters." data-i18n="[title]Helps the model to associate messages with characters." class="note-link-span fa-solid fa-circle-question"></span>
                                                <small class="flexBasis100p">(<span id="character_names_display"></span>)</small>
                                            </div>
                                            <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                                        </div>
                                        <div class="inline-drawer-content">
                                            <label class="checkbox_label flexWrap alignItemsCenter" for="character_names_none">
                                                <input type="radio" id="character_names_none" name="character_names" value="-1">
                                                <span data-i18n="None">None</span>
                                                <i class="right_menu_button fa-solid fa-circle-exclamation" title="Never add character name prefixes. May behave poorly in groups, choose with caution." data-i18n="[title]character_names_none"></i>
                                                <small class="flexBasis100p" data-i18n="Never add character names.">
                                                    Never add character names.
                                                </small>
                                            </label>
                                            <label class="checkbox_label flexWrap alignItemsCenter" for="character_names_default">
                                                <input type="radio" id="character_names_default" name="character_names" value="0">
                                                <span data-i18n="Default">Default</span>
                                                <i class="right_menu_button fa-solid fa-circle-exclamation" title="Add prefixes for groups and past personas. Otherwise, make sure you provide names in the prompt." data-i18n="[title]character_names_default"></i>
                                                <small class="flexBasis100p" data-i18n="Don't add character names unless necessary.">
                                                    Don't add character names unless necessary.
                                                </small>
                                            </label>
                                            <label class="checkbox_label flexWrap alignItemsCenter" for="character_names_completion">
                                                <input type="radio" id="character_names_completion" name="character_names" value="1">
                                                <span data-i18n="Completion Object">Completion Object</span>
                                                <i class="right_menu_button fa-solid fa-circle-exclamation" title="Restrictions apply: only Latin alphanumerics and underscores. Doesn't work for all sources, notably: Claude, MistralAI, Google." data-i18n="[title]character_names_completion"></i>
                                                <small class="flexBasis100p" data-i18n="Add character names to completion objects.">
                                                    Add character names to completion objects.
                                                </small>
                                            </label>
                                            <label class="checkbox_label flexWrap alignItemsCenter" for="character_names_content">
                                                <input type="radio" id="character_names_content" name="character_names" value="2">
                                                <span data-i18n="Message Content">Message Content</span>
                                                <small class="flexBasis100p" data-i18n="Prepend character names to message contents.">
                                                    Prepend character names to message contents.
                                                </small>
                                            </label>
                                            <!-- Hidden input for loading radio buttons from presets. Don't remove! -->
                                            <input type="hidden" id="names_behavior" class="displayNone" />
                                        </div>
                                    </div>
                                    <div class="inline-drawer wide100p flexFlowColumn marginBot10">
                                        <div class="inline-drawer-toggle inline-drawer-header">
                                            <div class="flex-container alignItemsCenter flexNoGap">
                                                <b data-i18n="Continue Postfix">Continue Postfix</b>
                                                <span data-i18n="[title]The next chunk of the continued message will be appended using this as a separator." title="The next chunk of the continued message will be appended using this as a separator." class="note-link-span fa-solid fa-circle-question"></span>
                                                <small class="flexBasis100p">(<span id="continue_postfix_display"></span>)</small>
                                            </div>
                                            <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                                        </div>
                                        <div class="inline-drawer-content">
                                            <label class="checkbox_label flexWrap alignItemsCenter" for="continue_postfix_none">
                                                <input type="radio" id="continue_postfix_none" name="continue_postfix" value="0">
                                                <span data-i18n="None">None</span>
                                            </label>
                                            <label class="checkbox_label flexWrap alignItemsCenter" for="continue_postfix_space">
                                                <input type="radio" id="continue_postfix_space" name="continue_postfix" value="1">
                                                <span data-i18n="Space">Space</span>
                                            </label>
                                            <label class="checkbox_label flexWrap alignItemsCenter" for="continue_postfix_newline">
                                                <input type="radio" id="continue_postfix_newline" name="continue_postfix" value="2">
                                                <span data-i18n="Newline">Newline</span>
                                            </label>
                                            <label class="checkbox_label flexWrap alignItemsCenter" for="continue_postfix_double_newline">
                                                <input type="radio" id="continue_postfix_double_newline" name="continue_postfix" value="3">
                                                <span data-i18n="Double Newline">Double Newline</span>
                                            </label>
                                            <!-- Hidden input for loading radio buttons from presets. Don't remove! -->
                                            <input type="hidden" id="continue_postfix" class="displayNone" />
                                        </div>
                                    </div>
                                    <div class="range-block">
                                        <label for="wrap_in_quotes" title="Wrap user messages in quotes before sending" data-i18n="[title]Wrap user messages in quotes before sending" class="checkbox_label widthFreeExpand">
                                            <input id="wrap_in_quotes" type="checkbox" /><span data-i18n="Wrap in Quotes">
                                                Wrap in Quotes</span>
                                        </label>
                                        <div class="toggle-description justifyLeft">
                                            <span data-i18n="Wrap entire user message in quotes before sending.">Wrap
                                                entire user message in quotes before sending.</span><br>
                                            <span data-i18n="Leave off if you use quotes manually for speech.">Leave off
                                                if you use quotes manually for speech.</span>
                                        </div>
                                    </div>
                                    <div class="range-block">
                                        <label for="continue_prefill" class="checkbox_label widthFreeExpand">
                                            <input id="continue_prefill" type="checkbox" />
                                            <span data-i18n="Continue prefill">Continue prefill</span>
                                        </label>
                                        <div class="toggle-description justifyLeft">
                                            <span data-i18n="Continue sends the last message as assistant role instead of system message with instruction.">
                                                Continue sends the last message as assistant role instead of system message with instruction.
                                            </span>
                                        </div>
                                    </div>
                                    <div class="range-block">
                                        <label for="squash_system_messages" title="Squash system messages" data-i18n="[title]Squash system messages" class="checkbox_label widthFreeExpand">
                                            <input id="squash_system_messages" type="checkbox" />
                                            <span data-i18n="Squash system messages">
                                                Squash system messages
                                            </span>
                                        </label>
                                        <div class="toggle-description justifyLeft">
                                            <span data-i18n="Combines consecutive system messages into one (excluding example dialogues). May improve coherence for some models.">
                                                Combines consecutive system messages into one (excluding example dialogues). May improve coherence for some models.
                                            </span>
                                        </div>
                                    </div>
                                    <div class="range-block" data-source="openai,cohere,mistralai,custom,claude,openrouter,groq">
                                        <label for="openai_function_calling" class="checkbox_label flexWrap widthFreeExpand">
                                            <input id="openai_function_calling" type="checkbox" />
                                            <span data-i18n="Enable function calling">Enable function calling</span>
                                            <div class="flexBasis100p toggle-description justifyLeft">
                                                <span data-i18n="enable_functions_desc_1">Allows using </span><a href="https://platform.openai.com/docs/guides/function-calling" target="_blank" data-i18n="enable_functions_desc_2">function tools</a>.
                                                <span data-i18n="enable_functions_desc_3">Can be utilized by various extensions to provide additional functionality.</span>
                                            </div>
                                        </label>
                                    </div>
                                    <div class="range-block" data-source="openai,openrouter,makersuite,claude,custom,01ai">
                                        <label for="openai_image_inlining" class="checkbox_label flexWrap widthFreeExpand">
                                            <input id="openai_image_inlining" type="checkbox" />
                                            <span data-i18n="Send inline images">Send inline images</span>
                                            <div id="image_inlining_hint" class="flexBasis100p toggle-description justifyLeft">
                                                <span data-i18n="image_inlining_hint_1">Sends images in prompts if the model supports it (e.g. GPT-4V, Claude 3 or Llava 13B).
                                                    Use the</span> <code><i class="fa-solid fa-paperclip"></i></code> <span data-i18n="image_inlining_hint_2">action on any message or the</span>
                                                <code><i class="fa-solid fa-wand-magic-sparkles"></i></code> <span data-i18n="image_inlining_hint_3">menu to attach an image file to the chat.</span>
                                            </div>
                                        </label>
                                        <div class="flex-container flexFlowColumn wide100p textAlignCenter marginTop10" data-source="openai,custom">
                                            <label for="openai_inline_image_quality" data-i18n="Inline Image Quality">
                                                Inline Image Quality
                                            </label>
                                            <select id="openai_inline_image_quality">
                                                <option data-i18n="openai_inline_image_quality_auto" value="auto">Auto</option>
                                                <option data-i18n="openai_inline_image_quality_low" value="low">Low</option>
                                                <option data-i18n="openai_inline_image_quality_high" value="high">High</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="range-block" data-source="ai21">
                                        <label for="use_ai21_tokenizer" title="Use AI21 Tokenizer" data-i18n="[title]Use AI21 Tokenizer" class="checkbox_label widthFreeExpand">
                                            <input id="use_ai21_tokenizer" type="checkbox" /><span data-i18n="Use AI21 Tokenizer">Use AI21 Tokenizer</span>
                                        </label>
                                        <div class="toggle-description justifyLeft">
                                            <span data-i18n="Use the appropriate tokenizer for Jurassic models, which is more efficient than GPT's.">Use the appropriate tokenizer for Jurassic models, which is more efficient than GPT's.</span>
                                        </div>
                                    </div>
                                    <div class="range-block" data-source="makersuite">
                                        <label for="use_google_tokenizer" title="Use Google Tokenizer" data-i18n="[title]Use Google Tokenizer" class="checkbox_label widthFreeExpand">
                                            <input id="use_google_tokenizer" type="checkbox" /><span data-i18n="Use Google Tokenizer">Use Google Tokenizer</span>
                                        </label>
                                        <div class="toggle-description justifyLeft">
                                            <span data-i18n="Use the appropriate tokenizer for Google models via their API. Slower prompt processing, but offers much more accurate token counting.">Use the appropriate tokenizer for Google models via their API. Slower prompt processing, but offers much more accurate token counting.</span>
                                        </div>
                                    </div>
                                    <div class="range-block" data-source="makersuite">
                                        <label for="use_makersuite_sysprompt" class="checkbox_label widthFreeExpand">
                                            <input id="use_makersuite_sysprompt" type="checkbox" />
                                            <span>
                                                <span data-i18n="Use system prompt">Use system prompt</span><br>
                                                <small data-i18n="(Gemini 1.5 Pro/Flash only)">(Gemini 1.5 Pro/Flash only)</small>
                                            </span>
                                        </label>
                                        <div class="toggle-description justifyLeft marginBot5">
                                            <span data-i18n="Merges_all_system_messages_desc_1">
                                                Merges all system messages up until the first message with a non-system role, and sends them in a</span> <code>system_instruction</code> <span data-i18n="Merges_all_system_messages_desc_2">field.
                                            </span>
                                        </div>
                                    </div>
                                    <div data-newbie-hidden class="range-block" data-source="claude">
                                        <div class="wide100p">
                                            <div class="flex-container alignItemsCenter">
                                                <span id="claude_assistant_prefill_text" data-i18n="Assistant Prefill">Assistant Prefill</span>
                                                <i class="editor_maximize fa-solid fa-maximize right_menu_button" data-for="claude_assistant_prefill" title="Expand the editor" data-i18n="[title]Expand the editor"></i>
                                            </div>
                                            <textarea id="claude_assistant_prefill" class="text_pole textarea_compact" name="assistant_prefill" rows="6" maxlength="100000" data-i18n="[placeholder]Start Claude's answer with..." placeholder="Start Claude's answer with..."></textarea>
                                            <div class="flex-container alignItemsCenter">
                                                <span id="claude_assistant_impersonation_text" data-i18n="Assistant Impersonation Prefill">Assistant Impersonation Prefill</span>
                                                <i class="editor_maximize fa-solid fa-maximize right_menu_button" data-for="claude_assistant_impersonation" title="Expand the editor" data-i18n="[title]Expand the editor"></i>
                                            </div>
                                            <textarea id="claude_assistant_impersonation" class="text_pole textarea_compact" name="assistant_impersonation" rows="6" maxlength="100000" data-i18n="[placeholder]Start Claude's answer with..." placeholder="Start Claude's answer with..."></textarea>
                                        </div>
                                        <label for="claude_use_sysprompt" class="checkbox_label widthFreeExpand">
                                            <input id="claude_use_sysprompt" type="checkbox" />
                                            <span data-i18n="Use system prompt (Claude 2.1+ only)">
                                                Use system prompt (Claude 2.1+ only)
                                            </span>
                                        </label>
                                        <div class="toggle-description justifyLeft marginBot5">
                                            <span data-i18n="Send the system prompt for supported models. If disabled, the user message is added to the beginning of the prompt.">
                                                Send the system prompt for supported models. If disabled, the user message is added to the beginning of the prompt.
                                            </span>
                                        </div>
                                        <div id="claude_human_sysprompt_message_block" class="wide100p">
                                            <div class="range-block-title openai_restorable">
                                                <span data-i18n="User first message">User first message</span>
                                                <div id="claude_human_sysprompt_message_restore" title="Restore User first message" data-i18n="[title]Restore User first message" class="right_menu_button">
                                                    <div class="fa-solid fa-clock-rotate-left"></div>
                                                </div>
                                            </div>
                                            <textarea id="claude_human_sysprompt_textarea" class="text_pole textarea_compact" rows="4" maxlength="10000" data-i18n="[placeholder]Human message" placeholder="Human message, instruction, etc.&#10;Adds nothing when empty, i.e. requires a new prompt with the role 'user'."></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div data-newbie-hidden class="range-block m-t-1" data-source="openai,openrouter,scale">
                                    <div id="logit_bias_openai" class="range-block-title openai_restorable" data-i18n="Logit Bias">
                                        Logit Bias
                                    </div>
                                    <div class="toggle-description justifyLeft" data-i18n="Helps to ban or reenforce the usage of certain words">
                                        Helps to ban or reinforce the usage of certain tokens. Confirm token parsing with <a target="_blank" href="https://platform.openai.com/tokenizer/">Tokenizer</a>.
                                    </div>
                                    <div class="openai_logit_bias_preset_form">
                                        <select id="openai_logit_bias_preset">
                                        </select>
                                        <i title="New preset" id="openai_logit_bias_new_preset" class="menu_button fa-solid fa-plus" data-i18n="[title]New preset"></i>
                                        <i title="Import preset" id="openai_logit_bias_import_preset" class="menu_button fa-solid fa-file-import" data-i18n="[title]Import preset"></i>
                                        <i title="Export preset" id="openai_logit_bias_export_preset" class="menu_button fa-solid fa-file-export" data-i18n="[title]Export preset"></i>
                                        <i title="Delete preset" id="openai_logit_bias_delete_preset" class="menu_button fa-solid fa-trash-can" data-i18n="[title]Delete preset"></i>
                                        <input id="openai_logit_bias_import_file" type="file" accept=".json" hidden />
                                    </div>
                                    <div class="inline-drawer wide100p">
                                        <div class="inline-drawer-toggle inline-drawer-header">
                                            <b data-i18n="View / Edit bias preset">View / Edit bias preset</b>
                                            <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                                        </div>
                                        <div class="inline-drawer-content">
                                            <div id="openai_logit_bias_new_entry" class="menu_button wide100p flex-container justifyCenter" data-i18n="Add bias entry">
                                                Add bias entry
                                            </div>
                                            <div class="openai_logit_bias_list" no_items_text="No items" data-i18n="[no_items_text]openai_logit_bias_no_items"></div>
                                            <div class="m-t-1">
                                                <small>
                                                    <i class="fa-solid fa-lightbulb"></i>
                                                    &nbsp;
                                                    <span data-i18n="Most tokens have a leading space.">
                                                        Most tokens have a leading space.
                                                    </span>
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div data-newbie-hidden class="range-block m-b-1">
                                    <div id="completion_prompt_manager"></div>
                                </div>
                            </div><!-- end of OpenAI settings-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="sys-settings-button" class="drawer">
            <div class="drawer-toggle drawer-header">
                <div id="API-status-top" class="drawer-icon fa-solid fa-plug-circle-exclamation  closedIcon" title="API Connections" data-i18n="[title]API Connections;[no_connection_text]api_no_connection" no_connection_text="No connection..."></div>
            </div>
            <div id="rm_api_block" class="drawer-content closedDrawer">
                <h3 class="margin0" id="title_api">API</h3>
                <div class="flex-container flexFlowColumn">
                    <div id="main-API-selector-block">
                        <select id="main_api">
                            <option value="textgenerationwebui"><span data-i18n="Text Completion">Text Completion</span></option>
                            <option value="openai"><span data-i18n="Chat Completion">Chat Completion</span></option>
                            <option value="novel"><span data-i18n="NovelAI">NovelAI</span></option>
                            <option value="koboldhorde"><span data-i18n="KoboldAI Horde">KoboldAI Horde</span></option>
                            <option value="kobold"><span data-i18n="KoboldAI">KoboldAI Classic</span></option>
                        </select>
                    </div>
                    <div id="kobold_horde" style="position: relative;"> <!-- shows the kobold settings -->
                        <form action="javascript:void(null);" method="post" enctype="multipart/form-data">
                            <div id="kobold_horde_block">
                                <ul>
                                    <li data-i18n="Avoid sending sensitive information to the Horde.">
                                        Avoid sending sensitive information to the Horde.
                                        <a target="_blank" href="https://docs.sillytavern.app/usage/api-connections/horde/" data-i18n="Review the Privacy statement">Review the Privacy statement</a>
                                    </li>
                                    <li>
                                        <a target="_blank" href="https://horde.koboldai.net/register" data-i18n="Register a Horde account for faster queue times">Register a Horde
                                            account for faster queue times</a>
                                    </li>
                                    <li>
                                        <a target="_blank" href="https://github.com/Haidra-Org/horde-worker-reGen?tab=readme-ov-file#ai-horde-worker-regen" data-i18n="Learn how to contribute your idle GPU cycles to the Horde">Learn
                                            how to contribute your idle GPU cycles to the Horde</a>
                                    </li>
                                </ul>
                                <label for="horde_auto_adjust_context_length" class="checkbox_label">
                                    <input id="horde_auto_adjust_context_length" type="checkbox" />
                                    <span data-i18n="Adjust context size to worker capabilities">Adjust context size to worker capabilities</span>
                                </label>
                                <label for="horde_auto_adjust_response_length" class="checkbox_label">
                                    <input id="horde_auto_adjust_response_length" type="checkbox" />
                                    <span data-i18n="Adjust response length to worker capabilities">Adjust response length to worker capabilities</span>
                                </label>
                                <label for="horde_trusted_workers_only" class="checkbox_label" title="Can help with bad responses by queueing only the approved workers. May slowdown the response time." data-i18n="[title]Can help with bad responses by queueing only the approved workers. May slowdown the response time.">
                                    <input id="horde_trusted_workers_only" type="checkbox" />
                                    <span data-i18n="Trusted workers only">Trusted workers only</span>
                                </label>
                                <small id="adjustedHordeParams">Context: --, Response: --</small>
                                <h4 data-i18n="API key">API key</h4>
                                <small>
                                    <span data-i18n="Get it here:">Get it here: </span> <a target="_blank" href="https://horde.koboldai.net/register" data-i18n="Register">Register</a> (<a id="horde_kudos" href="javascript:void(0);" data-i18n="View my Kudos">View my Kudos</a>)<br>
                                    <span data-i18n="Enter">Enter </span> <span class="monospace">0000000000</span> <span data-i18n="to use anonymous mode.">to use anonymous mode. </span>
                                </small>
                                <!-- <div>
                                        <a id="horde_kudos" href="javascript:void(0);">View my Kudos</a>
                                    </div> -->
                                <div class="flex-container">
                                    <input id="horde_api_key" name="horde_api_key" class="text_pole flex1" maxlength="500" type="text" placeholder="0000000000" autocomplete="off">
                                    <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_horde"></div>
                                </div>
                                <div data-for="horde_api_key" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                    For privacy reasons, your API key will be hidden after you reload the page.
                                </div>
                                <h4 class="horde_model_title">
                                    <span data-i18n="Models">Models </span>
                                    <div id="horde_refresh" title="Refresh models" data-i18n="[title]Refresh models" class="right_menu_button">
                                        <div class="fa-solid fa-repeat "></div>
                                    </div>
                                </h4>
                                <select id="horde_model" multiple>
                                    <option data-i18n="-- Horde models not loaded --">-- Horde models not loaded --</option>
                                </select>
                            </div>
                            <div class="online_status">
                                <div class="online_status_indicator"></div>
                                <div data-i18n="Not connected..." class="online_status_text">Not connected...</div>
                            </div>
                        </form>
                    </div>
                    <div id="kobold_api" style="position: relative;"> <!-- shows the kobold settings -->
                        <form action="javascript:void(null);" method="post" enctype="multipart/form-data">
                            <div id="kobold_api_block">
                                <h4 data-i18n="API url">API url</h4>
                                <small data-i18n="Example: http://127.0.0.1:5000/api ">Example: http://127.0.0.1:5000/api </small>
                                <input id="api_url_text" name="api_url" class="text_pole" placeholder="http://127.0.0.1:5000/api" maxlength="500" value="" autocomplete="off" data-server-history="kobold">
                                <div id="koboldcpp_hint" class="neutral_warning displayNone">
                                    KoboldCpp works better when you select the Text Completion API and then KoboldCpp as a type!
                                </div>
                                <div class="flex-container">
                                    <div id="api_button" class="api_button menu_button" type="submit" data-i18n="Connect" data-server-connect="kobold">Connect</div>
                                    <div class="api_loading menu_button" data-i18n="Cancel">Cancel</div>
                                </div>
                            </div>
                            <div class="online_status">
                                <div class="online_status_indicator"></div>
                                <div class="online_status_text" data-i18n="Not connected...">Not connected...</div>
                            </div>
                        </form>
                    </div>
                    <div id="novel_api" style="display: none;position: relative;"> <!-- shows the novel settings -->
                        <form action="javascript:void(null);" method="post" enctype="multipart/form-data">
                            <h4 data-i18n="Novel API key">Novel API key</h4>
                            <span>
                                <ol>
                                    <li>
                                        <a href="https://docs.sillytavern.app/usage/api-connections/novelai/" class="notes-link" target="_blank"> <span data-i18n="Get your NovelAI API Key">Get your NovelAI API key</span></a>
                                    </li>
                                    <li><span data-i18n="Enter it in the box below">Enter it in the box below:</span>
                                    </li>
                                </ol>
                            </span>
                            <div class="flex-container">
                                <input id="api_key_novel" name="api_key_novel" class="text_pole flex1 wide100p" maxlength="500" size="35" type="text" autocomplete="off">
                                <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_novel">
                                </div>
                            </div>
                            <div data-for="api_key_novel" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                For privacy reasons, your API key will be hidden after you reload the page.
                            </div>
                            <h4><span data-i18n="Novel AI Model">Novel AI Model</span>
                                <a href="https://docs.sillytavern.app/usage/api-connections/novelai/#models" class="notes-link" target="_blank">
                                    <span class="fa-solid fa-circle-question note-link-span"></span>
                                </a>
                            </h4>
                            <select id="model_novel_select">
                                <option value="clio-v1">Clio</option>
                                <option value="kayra-v1">Kayra</option>
                            </select>
                            <div class="flex-container">
                                <div id="api_button_novel" class="api_button menu_button" type="submit" data-i18n="Connect">Connect</div>
                                <div class="api_loading menu_button" data-i18n="Cancel">Cancel</div>
                            </div>
                        </form>
                        <div class="online_status">
                            <div class="online_status_indicator"></div>
                            <div class="online_status_text" data-i18n="No connection...">No connection... </div>
                        </div>
                    </div>
                    <div id="textgenerationwebui_api" style="display: none;position: relative;">
                        <form action="javascript:void(null);" method="post" enctype="multipart/form-data">
                            <div>
                                <h4 data-i18n="API Type">API Type</h4>
                                <select id="textgen_type">
                                    <option value="ooba" data-i18n="Default (completions compatible)">Default [OpenAI /completions compatible: oobabooga, LM Studio, etc.]</option>
                                    <option value="aphrodite">Aphrodite</option>
                                    <option value="dreamgen">DreamGen</option>
                                    <option value="featherless">Featherless</option>
                                    <option value="huggingface">HuggingFace (Inference Endpoint)</option>
                                    <option value="infermaticai">InfermaticAI</option>
                                    <option value="koboldcpp">KoboldCpp</option>
                                    <option value="llamacpp">llama.cpp</option>
                                    <option value="mancer">Mancer</option>
                                    <option value="ollama">Ollama</option>
                                    <option value="openrouter">OpenRouter</option>
                                    <option value="tabby">TabbyAPI</option>
                                    <option value="togetherai">TogetherAI</option>
                                    <option value="vllm">vLLM</option>
                                </select>
                            </div>
                            <div data-tg-type="togetherai" class="flex-container flexFlowColumn">
                                <h4 data-i18n="TogetherAI API Key">TogetherAI API Key</h4>
                                <div class="flex-container">
                                    <input id="api_key_togetherai" name="api_key_togetherai" class="text_pole flex1" maxlength="500" value="" type="text" autocomplete="off">
                                    <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_togetherai"></div>
                                </div>
                                <div data-for="api_key_togetherai" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                    For privacy reasons, your API key will be hidden after you reload the page.
                                </div>
                                <div>
                                    <h4 data-i18n="TogetherAI Model">TogetherAI Model</h4>
                                    <select id="model_togetherai_select">
                                        <option data-i18n="-- Connect to the API --">
                                            -- Connect to the API --
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div data-tg-type="openrouter" class="flex-container flexFlowColumn">
                                <h4 data-i18n="OpenRouter API Key">OpenRouter API Key</h4>
                                <div>
                                    <small data-i18n="Click Authorize below or get the key from">
                                        Click "Authorize" below or get the key from </small> <a target="_blank" href="https://openrouter.ai/keys/">OpenRouter</a>.
                                    <br>
                                    <a href="https://openrouter.ai/account" target="_blank" data-i18n="View Remaining Credits">View Remaining Credits</a>
                                </div>
                                <div class="flex-container">
                                    <input id="api_key_openrouter-tg" name="api_key_openrouter" class="text_pole flex1 api_key_openrouter" maxlength="500" value="" type="text" autocomplete="off">
                                    <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_openrouter"></div>
                                </div>
                                <div data-for="api_key_openrouter" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                    For privacy reasons, your API key will be hidden after you reload the page.
                                </div>
                                <div>
                                    <h4 data-i18n="OpenRouter Model">OpenRouter Model</h4>
                                    <select id="openrouter_model">
                                        <option data-i18n="-- Connect to the API --">
                                            -- Connect to the API --
                                        </option>
                                    </select>
                                </div>
                                <div>
                                    <h4 data-i18n="Model Providers">Model Providers</h4>
                                    <select id="openrouter_providers_text" class="openrouter_providers" multiple>
                                    </select>
                                    <label class="checkbox_label" for="openrouter_allow_fallbacks_textgenerationwebui" title="Automatically chooses an alternative provider if chosen providers can't serve your request.">
                                        <input id="openrouter_allow_fallbacks_textgenerationwebui" type="checkbox" />
                                        <span data-i18n="Allow fallback providers">Allow fallback providers</span>
                                    </label>
                                </div>
                            </div>
                            <div data-tg-type="infermaticai" class="flex-container flexFlowColumn">
                                <h4 data-i18n="InfermaticAI API Key">InfermaticAI API Key</h4>
                                <div class="flex-container">
                                    <input id="api_key_infermaticai" name="api_key_infermaticai" class="text_pole flex1" maxlength="500" value="" type="text" autocomplete="off">
                                    <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_infermaticai"></div>
                                </div>
                                <div data-for="api_key_infermaticai" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                    For privacy reasons, your API key will be hidden after you reload the page.
                                </div>
                                <div>
                                    <h4 data-i18n="InfermaticAI Model">InfermaticAI Model</h4>
                                    <select id="model_infermaticai_select">
                                        <option>
                                            -- Connect to the API --
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div data-tg-type="dreamgen" class="flex-container flexFlowColumn">
                                <h4>
                                    <span data-i18n="DreamGen API key">DreamGen API key</span>
                                    <a href="https://docs.sillytavern.app/usage/api-connections/dreamgen/" class="notes-link" target="_blank">
                                        <span class="fa-solid fa-circle-question note-link-span"></span>
                                    </a>
                                </h4>
                                <div class="flex-container">
                                    <input id="api_key_dreamgen" name="api_key_dreamgen" class="text_pole flex1" maxlength="500" value="" type="text" autocomplete="off">
                                    <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_dreamgen"></div>
                                </div>
                                <div data-for="api_key_dreamgen" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                    For privacy reasons, your API key will be hidden after you reload the page.
                                </div>
                                <div>
                                    <h4 data-i18n="DreamGen Model">DreamGen Model</h4>
                                    <select id="model_dreamgen_select">
                                        <option>
                                            -- Connect to the API --
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div data-tg-type="mancer" class="flex-container flexFlowColumn">
                                <div class="flex-container flexFlowColumn">
                                </div>
                                <h4 data-i18n="Mancer API key">
                                    Mancer API key
                                    <a href="https://mancer.tech/" class="notes-link" target="_blank">
                                        <span class="fa-solid fa-circle-question note-link-span"></span>
                                    </a>
                                </h4>
                                <div class="flex-container">
                                    <input id="api_key_mancer" name="api_key_mancer" class="text_pole flex1 wide100p" maxlength="500" size="35" type="text" autocomplete="off">
                                    <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_mancer">
                                    </div>
                                </div>
                                <div data-for="api_key_mancer" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                    For privacy reasons, your API key will be hidden after you reload the page.
                                </div>
                                <div class="flex1">
                                    <h4 data-i18n="Mancer Model">Mancer Model</h4>
                                    <select id="mancer_model">
                                        <option data-i18n="-- Connect to the API --">
                                            -- Connect to the API --
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div data-tg-type="ooba" class="flex-container flexFlowColumn">
                                <div class="flex-container flexFlowColumn">
                                    <a href="https://github.com/oobabooga/text-generation-webui" target="_blank">
                                        oobabooga/text-generation-webui
                                    </a>
                                    <label for="">
                                        <span data-i18n="Make sure you run it with">Make sure you run it with</span>
                                        <code>--api</code>
                                        <span data-i18n="flag">flag</span>
                                    </label>

                                </div>
                                <h4 data-i18n="API key (optional)">API key (optional)</h4>
                                <div class="flex-container">
                                    <input id="api_key_ooba" name="api_key_ooba" class="text_pole flex1 wide100p" maxlength="500" size="35" type="text" autocomplete="off">
                                    <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_ooba">
                                    </div>
                                </div>
                                <div data-for="api_key_ooba" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                    For privacy reasons, your API key will be hidden after you reload the page.
                                </div>
                                <div class="flex1">
                                    <h4 data-i18n="Server url">Server URL</h4>
                                    <small data-i18n="Example: 127.0.0.1:5000">Example: http://127.0.0.1:5000</small>
                                    <input id="textgenerationwebui_api_url_text" name="textgenerationwebui_api_url" class="text_pole wide100p" maxlength="500" value="" autocomplete="off" data-server-history="ooba_blocking">
                                </div>
                                <input id="custom_model_textgenerationwebui" class="text_pole wide100p" maxlength="500" placeholder="Custom model (optional)" data-i18n="[placeholder]Custom model (optional)" type="text">
                            </div>
                            <div data-tg-type="featherless" class="flex-container flexFlowColumn">
                                <div class="flex-container flexFlowColumn">
                                    <a href="https://featherless.ai/models/" target="_blank" rel="noopener noreferrer">
                                        featherless.ai
                                    </a>
                                </div>
                                <h4 data-i18n="API key (optional)">API key</h4>
                                <div class="flex-container">
                                    <input id="api_key_featherless" name="api_key_featherless" class="text_pole flex1 wide100p" maxlength="500" size="35" type="text" autocomplete="off">
                                    <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_featherless">
                                    </div>
                                </div>
                                <div data-for="api_key_featherless" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                    For privacy reasons, your API key will be hidden after you reload the page.
                                </div>
                                <select id="featherless_model">
                                    <option data-i18n="-- Connect to the API --">
                                        -- Connect to the API --
                                    </option>
                                </select>
                            </div>
                            <div data-tg-type="vllm">
                                <div class="flex-container flexFlowColumn">
                                    <a href="https://github.com/vllm-project/vllm" target="_blank" data-i18n="vllm-project/vllm">
                                        vllm-project/vllm (OpenAI API wrapper mode)
                                    </a>
                                </div>
                                <h4 data-i18n="vLLM API key">vLLM API key</h4>
                                <div class="flex-container">
                                    <input id="api_key_vllm" name="api_key_vllm" class="text_pole flex1 wide100p" maxlength="500" size="35" type="text" autocomplete="off">
                                    <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_vllm">
                                    </div>
                                </div>
                                <div data-for="api_key_vllm" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                    For privacy reasons, your API key will be hidden after you reload the page.
                                </div>
                                <div class="flex1">
                                    <h4 data-i18n="API url">API URL</h4>
                                    <small data-i18n="Example: 127.0.0.1:8000">Example: http://127.0.0.1:8000</small>
                                    <input id="vllm_api_url_text" class="text_pole wide100p" maxlength="500" value="" autocomplete="off" data-server-history="vllm">
                                </div>
                                <div>
                                    <h4 data-i18n="vLLM Model">vLLM Model</h4>
                                    <select id="vllm_model">
                                        <option data-i18n="-- Connect to the API --">
                                            -- Connect to the API --
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div data-tg-type="huggingface">
                                <h4 data-i18n="HuggingFace Token">HuggingFace Token</h4>
                                <div class="flex-container">
                                    <input id="api_key_huggingface" name="api_key_huggingface" class="text_pole flex1 wide100p" maxlength="500" size="35" type="text" autocomplete="off">
                                    <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_huggingface">
                                    </div>
                                </div>
                                <div data-for="api_key_huggingface" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                    For privacy reasons, your API key will be hidden after you reload the page.
                                </div>
                                <div class="flex1">
                                    <h4 data-i18n="Endpoint URL">Endpoint URL</h4>
                                    <small data-i18n="Example: https://****.endpoints.huggingface.cloud">Example: https://****.endpoints.huggingface.cloud</small>
                                    <input id="huggingface_api_url_text" class="text_pole wide100p" maxlength="500" value="" autocomplete="off" data-server-history="huggingface">
                                </div>
                            </div>

                            <div data-tg-type="aphrodite">
                                <div class="flex-container flexFlowColumn">
                                    <a href="https://github.com/PygmalionAI/aphrodite-engine" target="_blank" data-i18n="PygmalionAI/aphrodite-engine">
                                        PygmalionAI/aphrodite-engine (OpenAI API wrapper mode)
                                    </a>
                                </div>
                                <h4 data-i18n="Aphrodite API key">Aphrodite API key</h4>
                                <div class="flex-container">
                                    <input id="api_key_aphrodite" name="api_key_aphrodite" class="text_pole flex1 wide100p" maxlength="500" size="35" type="text" autocomplete="off">
                                    <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_aphrodite">
                                    </div>
                                </div>
                                <div data-for="api_key_aphrodite" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                    For privacy reasons, your API key will be hidden after you reload the page.
                                </div>
                                <div class="flex1">
                                    <h4 data-i18n="API url">API URL</h4>
                                    <small data-i18n="Example: 127.0.0.1:5000">Example: http://127.0.0.1:5000</small>
                                    <input id="aphrodite_api_url_text" class="text_pole wide100p" maxlength="500" value="" autocomplete="off" data-server-history="aphrodite">
                                </div>
                                <div>
                                    <h4 data-i18n="Aphrodite Model">Aphrodite Model</h4>
                                    <select id="aphrodite_model">
                                        <option data-i18n="-- Connect to the API --">
                                            -- Connect to the API --
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div data-tg-type="llamacpp">
                                <div class="flex-container flexFlowColumn">
                                    <a href="https://github.com/ggerganov/llama.cpp" target="_blank" data-i18n="ggerganov/llama.cpp">
                                        ggerganov/llama.cpp (inference server)
                                    </a>
                                </div>
                                <h4 data-i18n="API key (optional)">API key (optional)</h4>
                                <div class="flex-container">
                                    <input id="api_key_llamacpp" name="api_key_llamacpp" class="text_pole flex1 wide100p" maxlength="500" size="35" type="text" autocomplete="off">
                                    <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_llamacpp">
                                    </div>
                                </div>
                                <div data-for="api_key_llamacpp" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                    For privacy reasons, your API key will be hidden after you reload the page.
                                </div>
                                <div class="flex1">
                                    <h4 data-i18n="API url">API URL</h4>
                                    <small data-i18n="Example: 127.0.0.1:8080">Example: http://127.0.0.1:8080</small>
                                    <input id="llamacpp_api_url_text" class="text_pole wide100p" maxlength="500" value="" autocomplete="off" data-server-history="llamacpp">
                                </div>
                            </div>
                            <div data-tg-type="ollama">
                                <div class="flex-container flexFlowColumn">
                                    <a href="https://github.com/jmorganca/ollama" target="_blank">
                                        jmorganca/ollama
                                    </a>
                                </div>
                                <div class="flex1">
                                    <h4 data-i18n="API url">API URL</h4>
                                    <small data-i18n="Example: 127.0.0.1:11434">Example: http://127.0.0.1:11434</small>
                                    <input id="ollama_api_url_text" class="text_pole wide100p" maxlength="500" value="" autocomplete="off" data-server-history="ollama">
                                </div>
                                <div class="flex1">
                                    <h4>
                                        <span data-i18n="Ollama Model">Ollama Model
                                    </h4>
                                    </h4>
                                    <select id="ollama_model">
                                        <option data-i18n="-- Connect to the API --">
                                            -- Connect to the API --
                                        </option>
                                    </select>
                                    <div id="ollama_download_model" class="menu_button menu_button_icon">
                                        <i class="fa-solid fa-download"></i>
                                        <span data-i18n="Download">Download</span>
                                    </div>
                                </div>
                            </div>
                            <div data-tg-type="tabby">
                                <div class="flex-container flexFlowColumn">
                                    <a href="https://github.com/theroyallab/tabbyAPI" target="_blank">
                                        theroyallab/tabbyAPI
                                    </a>
                                </div>
                                <h4 data-i18n="Tabby API key">Tabby API key</h4>
                                <div class="flex-container">
                                    <input id="api_key_tabby" name="api_key_tabby" class="text_pole flex1 wide100p" maxlength="500" size="35" type="text" autocomplete="off">
                                    <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_tabby">
                                    </div>
                                </div>
                                <div data-for="api_key_tabby" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                    For privacy reasons, your API key will be hidden after you reload the page.
                                </div>
                                <div class="flex1">
                                    <h4 data-i18n="API url">API URL</h4>
                                    <small data-i18n="Example: 127.0.0.1:5000">Example: http://127.0.0.1:5000</small>
                                    <input id="tabby_api_url_text" class="text_pole wide100p" maxlength="500" value="" autocomplete="off" data-server-history="tabby">
                                </div>
                                <div class="flex1">
                                    <h4>
                                        <span data-i18n="Tabby Model">Tabby Model</span>
                                    </h4>
                                    </h4>
                                    <div id="tabby_download_model" class="menu_button menu_button_icon">
                                        <i class="fa-solid fa-download"></i>
                                        <span data-i18n="Download">Download</span>
                                    </div>
                                </div>
                            </div>
                            <div data-tg-type="koboldcpp">
                                <div class="flex-container flexFlowColumn">
                                    <a href="https://github.com/LostRuins/koboldcpp" target="_blank">
                                        LostRuins/koboldcpp
                                    </a>
                                </div>
                                <h4 data-i18n="koboldcpp API key (optional)">koboldcpp API key (optional)</h4>
                                <div class="flex-container">
                                    <input id="api_key_koboldcpp" name="api_key_koboldcpp" class="text_pole flex1 wide100p" maxlength="500" size="35" type="text" autocomplete="off">
                                    <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_koboldcpp">
                                    </div>
                                </div>
                                <div data-for="api_key_koboldcpp" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                    For privacy reasons, your API key will be hidden after you reload the page.
                                </div>
                                <div class="flex1">
                                    <h4 data-i18n="API url">API URL</h4>
                                    <small data-i18n="Example: 127.0.0.1:5001">Example: http://127.0.0.1:5001</small>
                                    <input id="koboldcpp_api_url_text" class="text_pole wide100p" maxlength="500" value="" autocomplete="off" data-server-history="koboldcpp">
                                </div>
                            </div>
                            <div class="flex-container">
                                <div id="api_button_textgenerationwebui" class="api_button menu_button" type="submit" data-i18n="Connect" data-server-connect="ooba_blocking,vllm,aphrodite,tabby,koboldcpp,ollama,llamacpp,huggingface">Connect</div>
                                <div data-tg-type="openrouter" class="menu_button menu_button_icon openrouter_authorize" title="Get your OpenRouter API token using OAuth flow. You will be redirected to openrouter.ai" data-i18n="Authorize;[title]Get your OpenRouter API token using OAuth flow. You will be redirected to openrouter.ai">Authorize</div>
                                <div class="api_loading menu_button" data-i18n="Cancel">Cancel</div>
                            </div>
                            <label data-tg-type="ooba,aphrodite" class="checkbox_label margin-bot-10px" for="legacy_api_textgenerationwebui">
                                <input type="checkbox" id="legacy_api_textgenerationwebui" />
                                <span data-i18n="Legacy API (pre-OAI, no streaming)">Legacy API (pre-OAI, no streaming)</span>
                            </label>
                            <label data-tg-type="ooba" class="checkbox_label margin-bot-10px" for="bypass_status_check_textgenerationwebui">
                                <input type="checkbox" id="bypass_status_check_textgenerationwebui" />
                                <span data-i18n="Bypass status check">Bypass status check</span>
                            </label>
                        </form>
                        <div class="online_status">
                            <div class="online_status_indicator"></div>
                            <div class="online_status_text" data-i18n="Not connected...">Not connected...</div>
                        </div>
                    </div>
                    <div id="openai_api" style="display: none;position: relative;">
                        <h4 class="margin0" data-i18n="Chat Completion Source">
                            Chat Completion Source
                        </h4>
                        <select id="chat_completion_source">
                            <optgroup>
                                <option value="openai">OpenAI</option>
                                <option value="custom" data-i18n="Custom (OpenAI-compatible)">Custom (OpenAI-compatible)</option>
                            </optgroup>
                            <optgroup>
                                <option value="01ai">01.AI (Yi)</option>
                                <option value="ai21">AI21</option>
                                <option value="blockentropy">Block Entropy</option>
                                <option value="claude">Claude</option>
                                <option value="cohere">Cohere</option>
                                <option value="groq">Groq</option>
                                <option value="makersuite">Google AI Studio</option>
                                <option value="mistralai">MistralAI</option>
                                <option value="openrouter">OpenRouter</option>
                                <option value="perplexity">Perplexity</option>
                                <option value="scale">Scale</option>
                                <option value="windowai">Window AI</option>
                            </optgroup>
                        </select>
                        <div data-newbie-hidden class="inline-drawer wide100p" data-source="openai,claude,mistralai,makersuite">
                            <div class="inline-drawer-toggle inline-drawer-header">
                                <b data-i18n="Reverse Proxy">Reverse Proxy</b>
                                <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                            </div>
                            <div class="inline-drawer-content">
                                <div class="range-block-title justifyLeft" data-i18n="Proxy Presets">
                                    Proxy Presets
                                </div>
                                <div class="toggle-description justifyLeft">
                                    <span data-i18n="Saved addresses and passwords.">
                                        Saved addresses and passwords.<br>
                                    </span>
                                </div>
                                <div class="openai_logit_bias_preset_form">
                                    <select id="openai_proxy_preset">
                                    </select>
                                    <i id="save_proxy" class="menu_button fa-solid fa-save" title="Save Proxy" data-i18n="[title]Save Proxy"></i>
                                    <i id="delete_proxy" class="menu_button fa-solid fa-trash" title="Delete Proxy" data-i18n="[title]Delete Proxy"></i>
                                </div>
                                <div class="range-block-title justifyLeft" data-i18n="Proxy Name">
                                    Proxy Name
                                </div>
                                <div class="toggle-description justifyLeft">
                                    <span data-i18n="This will show up as your saved preset.">
                                        This will show up as your saved preset.<br>
                                    </span>
                                </div>
                                <div class="wide100p">
                                    <input id="openai_reverse_proxy_name" type="text" class="text_pole" placeholder="..." maxlength="100" />
                                </div>
                                <div class="range-block-title justifyLeft" data-i18n="Proxy Server URL">
                                    Proxy Server URL
                                </div>
                                <div class="toggle-description justifyLeft wide100p">
                                    <span data-i18n="Alternative server URL (leave empty to use the default value).">
                                        Alternative server URL (leave empty to use the default value).<br>
                                    </span>
                                </div>
                                <div class="wide100p">
                                    <input id="openai_reverse_proxy" type="text" class="text_pole" placeholder="https://api.openai.com/v1" maxlength="5000" />
                                    <small class="reverse_proxy_warning">
                                        <span data-i18n="Doesn't work? Try adding">Doesn't work? Try adding</span> <code>/v1</code> <span data-i18n="at the end!">at the end!</span>
                                    </small>
                                </div>
                                <div class="range-block-title justifyLeft" data-i18n="Proxy Password">
                                    Proxy Password
                                </div>
                                <div class="toggle-description justifyLeft">
                                    <span data-i18n="Will be used as a password for the proxy instead of API key.">
                                        Will be used as a password for the proxy instead of API key.<br>
                                    </span>
                                </div>
                                <div class="flex-container width100p">
                                    <input id="openai_proxy_password" type="password" class="text_pole flex1" placeholder="" maxlength="5000" form="openai_form" autocomplete="off"/>
                                    <div id="openai_proxy_password_show" title="Peek a password" data-i18n="[title]Peek a password" class="menu_button fa-solid fa-eye-slash fa-fw"></div>
                                </div>
                            </div>
                        </div>
                        <div id="ReverseProxyWarningMessage" data-source="openai,claude,mistralai,makersuite">
                            <div class="reverse_proxy_warning">
                                <b>
                                    <div data-i18n="Using a proxy that you're not running yourself is a risk to your data privacy.">
                                        Using a proxy that you're not running yourself is a risk to your data privacy.
                                    </div>
                                    <div data-i18n="ANY support requests will be REFUSED if you are using a proxy.">
                                        ANY support requests will be REFUSED if you are using a proxy.
                                    </div>
                                    <hr>
                                    <i data-i18n="Do not proceed if you do not agree to this!">
                                        Do not proceed if you do not agree to this!
                                    </i>
                                </b>
                            </div>
                        </div>
                        <form id="openai_form" data-source="openai" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                            <h4><span data-i18n="OpenAI API key">OpenAI API key</span></h4>
                            <div>
                                <a id="openai_api_usage" href="https://platform.openai.com/account/usage" target="_blank">
                                    <span data-i18n="View API Usage Metrics">View API Usage Metrics</span>
                                </a>
                            </div>
                            <span>
                                <ol>
                                    <li>
                                        <span data-i18n="Follow">Follow</span>
                                        <a href="https://docs.sillytavern.app/usage/api-connections/openai/" class="notes-link" target="_blank"><span data-i18n="these directions"> these directions </span></a>
                                        <span data-i18n="to get your OpenAI API key.">to get your OpenAI API key.</span>
                                    </li>
                                    <li>
                                        <span data-i18n="Enter it in the box below">Enter it in the box below:</span>
                                    </li>
                                </ol>
                            </span>
                            <div class="flex-container">
                                <input id="api_key_openai" name="api_key_openai" class="text_pole flex1" maxlength="500" type="text" autocomplete="off">
                                <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_openai"></div>
                            </div>
                            <div id="ReverseProxyWarningMessage2" class="reverse_proxy_warning">
                                <b data-i18n="Use Proxy password field instead. This input will be ignored.">
                                    Use "Proxy password" field instead. This input will be ignored.
                                </b>
                            </div>
                            <div data-for="api_key_openai" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                For privacy reasons, your API key will be hidden after you reload the page.
                            </div>
                            <div>
                                <h4 data-i18n="OpenAI Model">OpenAI Model</h4>
                                <select id="model_openai_select">
                                    <optgroup label="GPT-3.5 Turbo">
                                        <option value="gpt-3.5-turbo">gpt-3.5-turbo</option>
                                        <option value="gpt-3.5-turbo-0125">gpt-3.5-turbo-0125 (2024)</option>
                                        <option value="gpt-3.5-turbo-1106">gpt-3.5-turbo-1106 (2023)</option>
                                        <option value="gpt-3.5-turbo-0613">gpt-3.5-turbo-0613 (2023)</option>
                                        <option value="gpt-3.5-turbo-0301">gpt-3.5-turbo-0301 (2023)</option>
                                        <option value="gpt-3.5-turbo-16k">gpt-3.5-turbo-16k</option>
                                        <option value="gpt-3.5-turbo-16k-0613">gpt-3.5-turbo-16k-0613 (2023)</option>
                                    </optgroup>
                                    <optgroup label="GPT-3.5 Turbo Instruct">
                                        <option value="gpt-3.5-turbo-instruct">gpt-3.5-turbo-instruct</option>
                                        <option value="gpt-3.5-turbo-instruct-0914">gpt-3.5-turbo-instruct-0914</option>
                                    </optgroup>
                                    <optgroup label="GPT-4">
                                        <option value="gpt-4">gpt-4</option>
                                        <option value="gpt-4-0613">gpt-4-0613 (2023)</option>
                                        <option value="gpt-4-0314">gpt-4-0314 (2023)</option>
                                        <option value="gpt-4-32k">gpt-4-32k</option>
                                        <option value="gpt-4-32k-0613">gpt-4-32k-0613 (2023)</option>
                                        <option value="gpt-4-32k-0314">gpt-4-32k-0314 (2023)</option>
                                    </optgroup>
                                    <optgroup label="GPT-4o">
                                        <option value="gpt-4o">gpt-4o</option>
                                        <option value="gpt-4o-2024-08-06">gpt-4o-2024-08-06</option>
                                        <option value="gpt-4o-2024-05-13">gpt-4o-2024-05-13</option>
                                        <option value="chatgpt-4o-latest">chatgpt-4o-latest</option>
                                    </optgroup>
                                    <optgroup label="gpt-4o-mini">
                                        <option value="gpt-4o-mini">gpt-4o-mini</option>
                                        <option value="gpt-4o-mini-2024-07-18">gpt-4o-mini-2024-07-18</option>
                                    </optgroup>
                                    <optgroup label="GPT-4 Turbo">
                                        <option value="gpt-4-turbo">gpt-4-turbo</option>
                                        <option value="gpt-4-turbo-2024-04-09">gpt-4-turbo-2024-04-09</option>
                                        <option value="gpt-4-turbo-preview">gpt-4-turbo-preview</option>
                                        <option value="gpt-4-vision-preview">gpt-4-vision-preview</option>
                                        <option value="gpt-4-0125-preview">gpt-4-0125-preview (2024)</option>
                                        <option value="gpt-4-1106-preview">gpt-4-1106-preview (2023)</option>
                                    </optgroup>
                                    <optgroup label="Other">
                                        <option value="text-davinci-003">text-davinci-003</option>
                                        <option value="text-davinci-002">text-davinci-002</option>
                                        <option value="text-curie-001">text-curie-001</option>
                                        <option value="text-babbage-001">text-babbage-001</option>
                                        <option value="text-ada-001">text-ada-001</option>
                                        <option value="code-davinci-002">code-davinci-002</option>
                                    </optgroup>
                                    <optgroup id="openai_external_category" label="External">
                                    </optgroup>
                                </select>
                                <label for="openai_bypass_status_check" class="checkbox_label">
                                    <input id="openai_bypass_status_check" type="checkbox" />
                                    <span data-i18n="Bypass API status check">Bypass API status check</span>
                                </label>
                                <label for="openai_show_external_models" class="checkbox_label">
                                    <input id="openai_show_external_models" type="checkbox" />
                                    <span data-i18n="Show External models (provided by API)">Show "External" models (provided by API)</span>
                                </label>
                            </div>
                        </form>
                        <form id="claude_form" data-source="claude" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                            <h4>Claude API Key</h4>
                            <div>
                                <span data-i18n="Get your key from">Get your key from </span> <a target="_blank" href="https://console.anthropic.com/account/keys" data-i18n="Anthropic's developer console">Anthropic's developer console</a>.
                            </div>
                            <div>
                                <b data-i18n="Slack and Poe cookies will not work here, do not bother trying.">
                                    Slack and Poe cookies will not work here, do not bother trying.
                                </b>
                            </div>
                            <div class="flex-container">
                                <input id="api_key_claude" name="api_key_claude" class="text_pole flex1" maxlength="500" value="" type="text" autocomplete="off">
                                <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_claude"></div>
                            </div>
                            <div data-for="api_key_claude" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                For privacy reasons, your API key will be hidden after you reload the page.
                            </div>
                            <div>
                                <h4 data-i18n="Claude Model">Claude Model</h4>
                                <select id="model_claude_select">
                                    <optgroup label="Versions">
                                        <option value="claude-3-5-sonnet-20240620">claude-3-5-sonnet-20240620</option>
                                        <option value="claude-3-opus-20240229">claude-3-opus-20240229</option>
                                        <option value="claude-3-sonnet-20240229">claude-3-sonnet-20240229</option>
                                        <option value="claude-3-haiku-20240307">claude-3-haiku-20240307</option>
                                        <option value="claude-2.1">claude-2.1</option>
                                        <option value="claude-2.0">claude-2.0</option>
                                        <option value="claude-1.3">claude-1.3</option>
                                        <option value="claude-instant-1.2">claude-instant-1.2</option>
                                        <option value="claude-instant-1.1">claude-instant-1.1</option>
                                    </optgroup>
                                </select>
                            </div>
                        </form>
                        <form id="windowai_form" data-source="windowai" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                            <div>
                                <h4 data-i18n="Window AI Model">Window AI Model</h4>
                                <select id="model_windowai_select">
                                    <option value="">Use extension settings</option>
                                    <option value="openai/gpt-3.5-turbo">openai/gpt-3.5-turbo</option>
                                    <option value="openai/gpt-3.5-turbo-16k">openai/gpt-3.5-turbo-16k</option>
                                    <option value="openai/gpt-4">openai/gpt-4</option>
                                    <option value="openai/gpt-4-32k">openai/gpt-4-32k</option>
                                    <option value="anthropic/claude-instant-v1">anthropic/claude-instant-v1</option>
                                    <option value="anthropic/claude-instant-v1-100k">anthropic/claude-instant-v1-100k</option>
                                    <option value="anthropic/claude-v1">anthropic/claude-v1</option>
                                    <option value="anthropic/claude-v1-100k">anthropic/claude-v1-100k</option>
                                    <option value="google/palm-2-chat-bison">google/palm-2-chat-bison</option>
                                    <option value="google/palm-2-codechat-bison">google/palm-2-codechat-bison</option>
                                    <option value="togethercomputer/GPT-NeoXT-Chat-Base-20B">togethercomputer/GPT-NeoXT-Chat-Base-20B</option>
                                    <option value="cohere/command-nightly">cohere/command-nightly</option>
                                </select>
                            </div>
                        </form>
                        <form id="openrouter_form" data-source="openrouter" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                            <h4 data-i18n="OpenRouter API Key">OpenRouter API Key</h4>
                            <div>
                                <small data-i18n="Click Authorize below or get the key from">
                                    Click "Authorize" below or get the key from </small> <a target="_blank" href="https://openrouter.ai/keys/">OpenRouter</a>.
                                <br>
                                <a href="https://openrouter.ai/account" target="_blank" data-i18n="View Remaining Credits">View Remaining Credits</a>
                            </div>
                            <div class="flex-container">
                                <input id="api_key_openrouter" name="api_key_openrouter" class="text_pole flex1 api_key_openrouter" maxlength="500" value="" type="text" autocomplete="off">
                                <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_openrouter"></div>
                            </div>
                            <div data-for="api_key_openrouter" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                For privacy reasons, your API key will be hidden after you reload the page.
                            </div>
                            <div>
                                <h4 data-i18n="OpenRouter Model">OpenRouter Model</h4>
                                <select id="model_openrouter_select">
                                    <option data-i18n="-- Connect to the API --">-- Connect to the API --</option>
                                </select>
                            </div>
                            <label for="openrouter_use_fallback" class="checkbox_label marginTopBot5" data-i18n="[title]Allow fallback routes Description" title="Automatically chooses an alternative model if the chosen model can't serve your request.">
                                <input id="openrouter_use_fallback" type="checkbox" />
                                <span data-i18n="Allow fallback models">Allow fallback models</span>
                            </label>
                            <div class="marginTopBot5">
                                <div class="inline-drawer wide100p">
                                    <div class="inline-drawer-toggle inline-drawer-header">
                                        <b data-i18n="Model Order">OpenRouter Model Sorting</b>
                                        <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                                    </div>
                                    <div class="inline-drawer-content m-b-1">
                                        <div class="marginTopBot5">
                                            <label for="openrouter_sort_models" class="checkbox_label">
                                                <select id="openrouter_sort_models">
                                                    <option data-i18n="Alphabetically" value="alphabetically">Alphabetically</option>
                                                    <option data-i18n="Price" value="pricing.prompt">Price (cheapest)</option>
                                                    <option data-i18n="Context Size" value="context_length">Context Size</option>
                                                </select>
                                            </label>
                                        </div>
                                        <div class="marginTopBot5">
                                            <label for="openrouter_group_models" class="checkbox_label">
                                                <input id="openrouter_group_models" type="checkbox" />
                                                <span data-i18n="Group by vendors">Group by vendors</span>
                                            </label>
                                            <div class="toggle-description justifyLeft wide100p">
                                                <span data-i18n="Group by vendors Description">
                                                    Put OpenAI models in one group, Anthropic models in other group, etc. Can be combined with sorting.
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <h4 data-i18n="Model Providers">Model Providers</h4>
                                <select id="openrouter_providers_chat" class="openrouter_providers" multiple>
                                </select>
                                <label class="checkbox_label marginTopBot5" for="openrouter_allow_fallbacks" title="Automatically chooses an alternative provider if chosen providers can't serve your request.">
                                    <input id="openrouter_allow_fallbacks" type="checkbox" />
                                    <span data-i18n="Allow fallback providers">Allow fallback providers</span>
                                </label>
                            </div>
                            <div class="marginTopBot5">
                                <label for="openrouter_force_instruct" class="checkbox_label">
                                    <input id="openrouter_force_instruct" type="checkbox" />
                                    <span class="flex-container alignItemsBaseline" title="This option is outdated and will be removed in the future. To use instruct formatting, please switch to OpenRouter under Text Completion API instead." data-i18n="[title]openrouter_force_instruct">
                                        <i class="fa-solid fa-circle-exclamation neutral_warning"></i>
                                        <b data-i18n="LEGACY">LEGACY</b>
                                    </span>
                                    <span data-i18n="Force Instruct Mode formatting">Force Instruct Mode formatting</span>
                                </label>
                                <div class="toggle-description justifyLeft wide100p">
                                    <span data-i18n="Force_Instruct_Mode_formatting_Description">
                                        If both Instruct Mode and this are enabled, the prompt will be formatted by SillyTavern using the current
                                        advanced formatting settings (except instruct System Prompt). If disabled, the prompt will be formatted by OpenRouter.
                                    </span>
                                </div>
                            </div>
                        </form>
                        <form id="scale_form" data-source="scale" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                            <div id="normal_scale_form">
                                <h4 data-i18n="Scale API Key">Scale API Key</h4>
                                <div class="flex-container">
                                    <input id="api_key_scale" name="api_key_scale" class="text_pole flex1" maxlength="500" value="" autocomplete="off">
                                    <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_scale"></div>
                                </div>
                                <div data-for="api_key_scale" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                    For privacy reasons, your API key will be hidden after you reload the page.
                                </div>
                                <h4>Scale API URL</h4>
                                <input id="api_url_scale" name="api_url_scale" class="text_pole" maxlength="500" value="" autocomplete="off" placeholder="https://dashboard.scale.com/spellbook/api/v2/deploy/xxxxxxx">
                            </div>
                            <div id="alt_scale_form">
                                <h4>Scale Cookie (_jwt)</h4>
                                <div class="flex-container">
                                    <input id="scale_cookie" name="scale_cookie" class="text_pole flex1" maxlength="500" value="" autocomplete="off">
                                    <div title="Clear your cookie" data-i18n="[title]Clear your cookie" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="scale_cookie"></div>
                                </div>
                                <div data-for="scale_cookie" class="neutral_warning">
                                    For privacy reasons, your cookie will be hidden after you reload the page.
                                </div>
                            </div>
                            <!-- Its only purpose is to trigger max context size check -->
                            <select id="model_scale_select" class="displayNone"></select>
                            <label for="scale-alt" class="checkbox_label">
                                <input id="scale-alt" type="checkbox" checked>
                                <span data-i18n="Alt Method">Alt Method</span>
                            </label>
                        </form>
                        <form id="ai21_form" data-source="ai21" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                            <h4 data-i18n="AI21 API Key">AI21 API Key</h4>
                            <div class="flex-container">
                                <input id="api_key_ai21" name="api_key_ai21" class="text_pole flex1" maxlength="500" value="" type="text" autocomplete="off">
                                <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_ai21"></div>
                            </div>
                            <div data-for="api_key_ai21" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                For privacy reasons, your API key will be hidden after you reload the page.
                            </div>
                            <div>
                                <h4 data-i18n="AI21 Model">AI21 Model</h4>
                                <select id="model_ai21_select">
                                    <optgroup label="Latest">
                                        <option value="j2-ultra">j2-ultra</option>
                                        <option value="j2-mid">j2-mid</option>
                                        <option value="j2-light">j2-light</option>
                                    </optgroup>
                                </select>
                            </div>
                        </form>
                        <form id="makersuite_form" data-source="makersuite" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                            <h4 data-i18n="Google AI Studio API Key">Google AI Studio API Key</h4>
                            <div class="flex-container">
                                <input id="api_key_makersuite" name="api_key_makersuite" class="text_pole flex1" maxlength="500" value="" type="text" autocomplete="off">
                                <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_makersuite"></div>
                            </div>
                            <div data-for="api_key_makersuite" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                For privacy reasons, your API key will be hidden after you reload the page.
                            </div>
                            <div>
                                <h4 data-i18n="Google Model">Google Model</h4>
                                <select id="model_google_select">
                                    <optgroup label="Primary">
                                        <option value="gemini-1.5-pro">Gemini 1.5 Pro</option>
                                        <option value="gemini-1.5-flash">Gemini 1.5 Flash</option>
                                        <option value="gemini-1.0-pro">Gemini 1.0 Pro</option>
                                        <option value="gemini-pro">Gemini Pro (1.0)</option>
                                        <option value="gemini-pro-vision">Gemini Pro Vision (1.0)</option>
                                        <option value="gemini-ultra">Gemini Ultra (1.0)</option>
                                        <option value="gemini-1.0-ultra-latest">Gemini 1.0 Ultra</option>
                                        <option value="text-bison-001">PaLM 2 (Legacy)</option>
                                        <option value="chat-bison-001">PaLM 2 Chat (Legacy)</option>
                                    </optgroup>
                                    <optgroup label="Subversions">
                                        <option value="gemini-1.5-pro-exp-0801">Gemini 1.5 Pro Experiment 2024-08-01</option>
                                        <option value="gemini-1.5-pro-latest">Gemini 1.5 Pro [latest]</option>
                                        <option value="gemini-1.5-pro-001">Gemini 1.5 Pro [001]</option>
                                        <option value="gemini-1.5-flash-latest">Gemini 1.5 Flash [latest]</option>
                                        <option value="gemini-1.5-flash-001">Gemini 1.5 Flash [001]</option>
                                        <option value="gemini-1.0-pro-latest">Gemini 1.0 Pro [latest]</option>
                                        <option value="gemini-1.0-pro-001">Gemini 1.0 Pro (Tuning) [001]</option>
                                        <option value="gemini-1.0-pro-vision-latest">Gemini 1.0 Pro Vision [latest]</option>
                                    </optgroup>
                                </select>
                            </div>
                        </form>
                        <form id="mistralai_form" data-source="mistralai" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                            <h4 data-i18n="MistralAI API Key">MistralAI API Key</h4>
                            <div class="flex-container">
                                <input id="api_key_mistralai" name="api_key_mistralai" class="text_pole flex1" maxlength="500" value="" type="text" autocomplete="off">
                                <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_mistralai"></div>
                            </div>
                            <div data-for="api_key_mistralai" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                For privacy reasons, your API key will be hidden after you reload the page.
                            </div>
                            <div>
                                <h4 data-i18n="MistralAI Model">MistralAI Model</h4>
                                <select id="model_mistralai_select">
                                    <optgroup label="Latest">
                                        <option value="open-mistral-nemo">open-mistral-nemo</option>
                                        <option value="open-mistral-7b">open-mistral-7b</option>
                                        <option value="open-mixtral-8x7b">open-mixtral-8x7b</option>
                                        <option value="open-mixtral-8x22b">open-mixtral-8x22b</option>
                                        <option value="open-codestral-mamba">open-codestral-mamba</option>
                                        <option value="mistral-small-latest">mistral-small-latest</option>
                                        <option value="mistral-medium-latest">mistral-medium-latest</option>
                                        <option value="mistral-large-latest">mistral-large-latest</option>
                                        <option value="codestral-latest">codestral-latest</option>
                                        <option value="codestral-mamba-latest">codestral-mamba-latest</option>
                                    </optgroup>
                                    <optgroup label="Sub-versions">
                                        <option value="open-mistral-nemo-2407">open-mistral-nemo-2407</option>
                                        <option value="open-mixtral-8x22b-2404">open-mixtral-8x22b-2404</option>
                                        <option value="mistral-tiny-2312">mistral-tiny-2312</option>
                                        <option value="mistral-small-2312">mistral-small-2312</option>
                                        <option value="mistral-small-2402">mistral-small-2402</option>
                                        <option value="mistral-medium-2312">mistral-medium-2312</option>
                                        <option value="mistral-large-2402">mistral-large-2402</option>
                                        <option value="mistral-large-2407">mistral-large-2407</option>
                                        <option value="codestral-2405">codestral-2405</option>
                                        <option value="codestral-mamba-2407">codestral-mamba-2407</option>
                                    </optgroup>
                                </select>
                            </div>
                        </form>
                        <div id="groq_form" data-source="groq">
                            <h4 data-i18n="Groq API Key">Groq API Key</h4>
                            <div class="flex-container">
                                <input id="api_key_groq" name="api_key_groq" class="text_pole flex1" maxlength="500" value="" type="text" autocomplete="off">
                                <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_groq"></div>
                            </div>
                            <div data-for="api_key_groq" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                For privacy reasons, your API key will be hidden after you reload the page.
                            </div>
                            <h4 data-i18n="Groq Model">Groq Model</h4>
                            <select id="model_groq_select">
                                <option value="llama-3.1-405b-reasoning">llama-3.1-405b-reasoning</option>
                                <option value="llama-3.1-70b-versatile">llama-3.1-70b-versatile</option>
                                <option value="llama-3.1-8b-instant">llama-3.1-8b-instant</option>
                                <option value="llama3-groq-70b-8192-tool-use-preview">llama3-groq-70b-8192-tool-use-preview</option>
                                <option value="llama3-groq-8b-8192-tool-use-preview">llama3-groq-8b-8192-tool-use-preview</option>
                                <option value="llama3-8b-8192">llama3-8b-8192</option>
                                <option value="llama3-70b-8192">llama3-70b-8192</option>
                                <option value="mixtral-8x7b-32768">mixtral-8x7b-32768</option>
                                <option value="gemma-7b-it">gemma-7b-it</option>
                                <option value="gemma2-9b-it">gemma2-9b-it</option>
                            </select>
                        </div>
                        <div id="perplexity_form" data-source="perplexity">
                            <h4 data-i18n="Perplexity API Key">Perplexity API Key</h4>
                            <div class="flex-container">
                                <input id="api_key_perplexity" name="api_key_perplexity" class="text_pole flex1" maxlength="500" value="" type="text" autocomplete="off">
                                <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_perplexity"></div>
                            </div>
                            <div data-for="api_key_perplexity" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                For privacy reasons, your API key will be hidden after you reload the page.
                            </div>
                            <h4 data-i18n="Perplexity Model">Perplexity Model</h4>
                            <select id="model_perplexity_select">
                                <optgroup label="Perplexity Sonar Models">
                                    <option value="llama-3.1-sonar-small-128k-online">llama-3.1-sonar-small-128k-online</option>
                                    <option value="llama-3.1-sonar-large-128k-online">llama-3.1-sonar-large-128k-online</option>
                                    <option value="llama-3.1-sonar-huge-128k-online">llama-3.1-sonar-huge-128k-online</option>
                                </optgroup>
                                <optgroup label="Perplexity Chat Models">
                                    <option value="llama-3.1-sonar-small-128k-chat">llama-3.1-sonar-small-128k-chat</option>
                                    <option value="llama-3.1-sonar-large-128k-chat">llama-3.1-sonar-large-128k-chat</option>
                                </optgroup>
                                <optgroup label="Open-Source Models">
                                    <option value="llama-3.1-8b-instruct">llama-3.1-8b-instruct</option>
                                    <option value="llama-3.1-70b-instruct">llama-3.1-70b-instruct</option>
                                </optgroup>
                                <optgroup label="Deprecated Models">
                                    <option value="llama-3-sonar-small-32k-chat">llama-3-sonar-small-32k-chat</option>
                                    <option value="llama-3-sonar-small-32k-online">llama-3-sonar-small-32k-online</option>
                                    <option value="llama-3-sonar-large-32k-chat">llama-3-sonar-large-32k-chat</option>
                                    <option value="llama-3-sonar-large-32k-online">llama-3-sonar-large-32k-online</option>
                                    <option value="sonar-small-chat">sonar-small-chat</option>
                                    <option value="sonar-small-online">sonar-small-online</option>
                                    <option value="sonar-medium-chat">sonar-medium-chat</option>
                                    <option value="sonar-medium-online">sonar-medium-online</option>
                                    <option value="llama-3-8b-instruct">llama-3-8b-instruct</option>
                                    <option value="llama-3-70b-instruct">llama-3-70b-instruct</option>
                                    <option value="mistral-7b-instruct">mistral-7b-instruct (v0.2)</option>
                                    <option value="mixtral-8x7b-instruct">mixtral-8x7b-instruct</option>
                                </optgroup>
                            </select>
                        </div>
                        <form id="cohere_form" data-source="cohere" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                            <h4 data-i18n="Cohere API Key">Cohere API Key</h4>
                            <div class="flex-container">
                                <input id="api_key_cohere" name="api_key_cohere" class="text_pole flex1" maxlength="500" value="" type="text" autocomplete="off">
                                <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_cohere"></div>
                            </div>
                            <div data-for="api_key_cohere" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                For privacy reasons, your API key will be hidden after you reload the page.
                            </div>
                            <div>
                                <h4 data-i18n="Cohere Model">Cohere Model</h4>
                                <select id="model_cohere_select">
                                    <optgroup label="Stable">
                                        <option value="c4ai-aya-23">c4ai-aya-23</option>
                                        <option value="command-light">command-light</option>
                                        <option value="command">command</option>
                                        <option value="command-r">command-r</option>
                                        <option value="command-r-plus">command-r-plus</option>
                                    </optgroup>
                                    <optgroup label="Nightly">
                                        <option value="command-light-nightly">command-light-nightly</option>
                                        <option value="command-nightly">command-nightly</option>
                                    </optgroup>
                                </select>
                            </div>
                        </form>
                        <form id="blockentropy_form" data-source="blockentropy">
                            <h4 data-i18n="Block Entropy API Key">Block Entropy API Key</h4>
                            <div class="flex-container">
                                <input id="api_key_blockentropy" name="api_key_blockentropy" class="text_pole flex1" maxlength="500" value="" type="text" autocomplete="off">
                                <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_blockentropy"></div>
                            </div>
                            <div data-for="api_key_blockentropy" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                For privacy reasons, your API key will be hidden after you reload the page.
                            </div>
                            <h4 data-i18n="Select a Model">Select a Model</h4>
                            <div class="flex-container">
                                <select id="model_blockentropy_select" class="text_pole"></select>
                            </div>
                        </form>
                        <form id="custom_form" data-source="custom">
                            <h4 data-i18n="Custom Endpoint (Base URL)">Custom Endpoint (Base URL)</h4>
                            <div class="flex-container">
                                <input id="custom_api_url_text" class="text_pole wide100p" maxlength="5000" value="" autocomplete="off" data-i18n="[placeholder]Example: http://localhost:1234/v1" placeholder="Example: http://localhost:1234/v1">
                            </div>
                            <div>
                                <small>
                                    <span data-i18n="Doesn't work? Try adding">Doesn't work? Try adding</span> <code>/v1</code> <span data-i18n="at the end of the URL!">at the end of the URL!</span>
                                </small>
                            </div>
                            <h4>
                                <span data-i18n="Custom API Key">Custom API Key</span>
                                <small data-i18n="(Optional)">(Optional)</small>
                            </h4>
                            <div class="flex-container">
                                <input id="api_key_custom" name="api_key_custom" class="text_pole flex1" maxlength="5000" value="" type="text" autocomplete="off">
                                <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_custom"></div>
                            </div>
                            <div data-for="api_key_custom" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                For privacy reasons, your API key will be hidden after you reload the page.
                            </div>
                            <h4 data-i18n="Enter a Model ID">Enter a Model ID</h4>
                            <div class="flex-container">
                                <input list="model_custom_select_fill" id="custom_model_id" class="text_pole wide100p" maxlength="500" value="" autocomplete="off" data-i18n="[placeholder]Example: gpt-3.5-turbo" placeholder="Example: gpt-3.5-turbo">
                                <datalist id="model_custom_select_fill" class="text_pole model_custom_select"></datalist>
                            </div>
                            <h4 data-i18n="Available Models">Available Models</h4>
                            <div class="flex-container">
                                <select id="model_custom_select" class="text_pole model_custom_select"></select>
                            </div>
                            <h4 data-i18n="Prompt Post-Processing">Prompt Post-Processing</h4>
                            <select id="custom_prompt_post_processing" class="text_pole" title="Applies additional processing to the prompt before sending it to the API." data-i18n="[title]Applies additional processing to the prompt before sending it to the API.">
                                <option data-i18n="prompt_post_processing_none" value="">None</option>
                                <option value="claude">Claude</option>
                            </select>
                        </form>
                        <div id="01ai_form" data-source="01ai">
                            <h4>
                                <a data-i18n="01.AI API Key" href="https://platform.01.ai/" target="_blank" rel="noopener noreferrer">
                                    01.AI API Key
                                </a>
                            </h4>
                            <div class="flex-container">
                                <input id="api_key_01ai" name="api_key_01ai" class="text_pole flex1" maxlength="500" value="" type="text" autocomplete="off">
                                <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_01ai"></div>
                            </div>
                            <div data-for="api_key_01ai" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                For privacy reasons, your API key will be hidden after you reload the page.
                            </div>
                            <h4 data-i18n="01.AI Model">01.AI Model</h4>
                            <select id="model_01ai_select">
                            </select>
                        </div>
                        <div class="flex-container flex">
                            <div id="api_button_openai" class="api_button menu_button menu_button_icon" type="submit" data-i18n="Connect">Connect</div>
                            <div class="api_loading menu_button" data-i18n="Cancel">Cancel</div>
                            <div data-source="custom" id="customize_additional_parameters" class="menu_button menu_button_icon" data-i18n="Additional Parameters">Additional Parameters</div>
                            <div data-source="openrouter" class="menu_button menu_button_icon openrouter_authorize" title="Get your OpenRouter API token using OAuth flow. You will be redirected to openrouter.ai" data-i18n="Authorize;[title]Get your OpenRouter API token using OAuth flow. You will be redirected to openrouter.ai">Authorize</div>
                            <div id="test_api_button" class="menu_button menu_button_icon" title="Verifies your API connection by sending a short test message. Be aware that you'll be credited for it!" data-i18n="[title]Verifies your API connection by sending a short test message. Be aware that you'll be credited for it!"><span data-i18n="Test Message">Test Message</span></div>
                        </div>
                        <div class="online_status">
                            <div class="online_status_indicator"></div>
                            <div class="online_status_text" data-i18n="No connection...">No connection...</div>
                        </div>
                    </div>
                </div>
                <div class="flex-container alignitemscenter spaceBetween wide100p">
                    <label for="auto-connect-checkbox" class="checkbox_label"><input id="auto-connect-checkbox" type="checkbox" />
                        <span data-i18n="Auto-connect to Last Server">Auto-connect to Last Server</span>
                    </label>
                    <a id="viewSecrets" href="javascript:void(0);" data-i18n="[missing_key_text]Missing key;[key_saved_text]Key saved" missing_key_text="❌ Missing key" key_saved_text="✔️ Key saved"><span data-i18n="View hidden API keys">View hidden API keys</span></a>
                </div>
            </div>
        </div>
        <div id="advanced-formatting-button" class="drawer">
            <div class="drawer-toggle">
                <div class="drawer-icon fa-solid fa-font  closedIcon" title="AI Response Formatting" data-i18n="[title]AI Response Formatting"></div>
            </div>
            <div class="drawer-content">
                <h3 class="margin0" data-i18n="Advanced Formatting">
                    Advanced Formatting
                </h3>
                <div class="flex-container">
                    <div id="PygOverrides">
                        <div>
                            <h4 class="standoutHeader title_restorable">
                                <div>
                                    <span data-i18n="Context Template">Context Template</span>
                                    <a href="https://docs.sillytavern.app/usage/core-concepts/advancedformatting/#context-template" class="notes-link" target="_blank">
                                        <span class="fa-solid fa-circle-question note-link-span"></span>
                                    </a>
                                </div>
                                <div class="flex-container">
                                    <i data-newbie-hidden data-preset-manager-import="context" class="margin0 menu_button fa-solid fa-file-import" title="Import preset" data-i18n="[title]Import preset"></i>
                                    <i data-newbie-hidden data-preset-manager-export="context" class="margin0 menu_button fa-solid fa-file-export" title="Export preset" data-i18n="[title]Export preset"></i>
                                    <i data-newbie-hidden data-preset-manager-restore="context" class="margin0 menu_button fa-solid fa-recycle" title="Restore current preset" data-i18n="[title]Restore current preset"></i>
                                    <i data-newbie-hidden id="context_delete_preset" data-preset-manager-delete="context" class="margin0 menu_button fa-solid fa-trash-can" title="Delete the preset" data-i18n="[title]Delete the preset"></i>
                                </div>
                            </h4>
                            <div class="flex-container">
                                <select id="context_presets" data-preset-manager-for="context" class="flex1 text_pole"></select>
                                <input type="file" hidden data-preset-manager-file="context" accept=".json, .settings">
                                <i id="context_set_default" class="menu_button fa-solid fa-heart" title="Auto-select this preset for Instruct Mode." data-i18n="[title]Auto-select this preset for Instruct Mode"></i>
                                <i data-newbie-hidden data-preset-manager-update="context" class="menu_button fa-solid fa-save" title="Update current preset" data-i18n="[title]Update current preset"></i>
                                <i data-newbie-hidden data-preset-manager-new="context" class="menu_button fa-solid fa-file-circle-plus" title="Save preset as" data-i18n="[title]Save preset as"></i>
                            </div>
                            <div data-newbie-hidden>
                                <label for="context_story_string">
                                    <small data-i18n="Story String">Story String</small>
                                </label>
                                <textarea id="context_story_string" class="text_pole textarea_compact autoSetHeight" rows="1"></textarea>
                                <div class="flex-container">
                                    <div class="flex1">
                                        <label for="context_example_separator">
                                            <small data-i18n="Example Separator">Example Separator</small>
                                        </label>
                                        <div>
                                            <textarea id="context_example_separator" class="text_pole textarea_compact autoSetHeight" maxlength="500" rows="1"></textarea>
                                        </div>
                                    </div>
                                    <div class="flex1">
                                        <label for="context_chat_start">
                                            <small data-i18n="Chat Start">Chat Start</small>
                                        </label>
                                        <div>
                                            <textarea id="context_chat_start" class="text_pole textarea_compact autoSetHeight" maxlength="500" rows="1"></textarea>
                                        </div>
                                    </div>
                                </div>
                                <label class="checkbox_label" title="Add Chat Start and Example Separator to a list of stopping strings." data-i18n="[title]Add Chat Start and Example Separator to a list of stopping strings.">
                                    <input id="context_use_stop_strings" type="checkbox" />
                                    <small data-i18n="Separators as Stop Strings">Separators as Stop Strings</small>
                                </label>
                                <label class="checkbox_label" title="Add Character and User names to a list of stopping strings." data-i18n="[title]Add Character and User names to a list of stopping strings.">
                                    <input id="context_names_as_stop_strings" type="checkbox" />
                                    <small data-i18n="Names as Stop Strings">Names as Stop Strings</small>
                                </label>
                                <label class="checkbox_label" title="Includes Post-History Instructions at the end of the prompt, if defined in the character card AND ''Prefer Char. Instructions'' is enabled.&#10;THIS IS NOT RECOMMENDED FOR TEXT COMPLETION MODELS, CAN LEAD TO BAD OUTPUT." data-i18n="[title]context_allow_post_history_instructions">
                                    <input id="context_allow_jailbreak" type="checkbox" />
                                    <small data-i18n="Allow Post-History Instructions">Allow Post-History Instructions</small>
                                </label>
                            </div>

                            <div data-newbie-hidden class="inline-drawer wide100p flexFlowColumn margin-bot-10px" style="display:none;">
                                <div class="inline-drawer-toggle inline-drawer-header">
                                    <b><span data-i18n="Context Order">Context Order</span></b>
                                    <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                                </div>
                                <div class="inline-drawer-content">
                                    <div id="context_order" class="prompt_order">
                                        <div data-id="0">
                                            <span data-i18n="Story String">Story String</span>
                                            <small>0</small>
                                        </div>
                                        <div data-id="1">
                                            <span data-i18n="Summary">Summary</span>
                                            <small>1</small>
                                        </div>
                                        <div data-id="2">
                                            <span data-i18n="Author's Note">Author's Note</span>
                                            <small>2</small>
                                        </div>
                                        <div data-id="3">
                                            <span data-i18n="Example Dialogues">Example Dialogues</span>
                                            <small>3</small>
                                        </div>
                                        <div data-id="4">
                                            <span data-i18n="Chat Start">Chat History</span>
                                            <small>4</small>
                                        </div>
                                    </div>
                                    <small>
                                        <b data-i18n="Hint">Hint:</b>
                                        <span data-i18n="In-Chat Position not affected">
                                            Summary and Author's Note orders are only affected when they don't have an In-Chat position set.
                                        </span>
                                    </small>
                                </div>
                            </div>
                        </div>
                        <div>
                            <h4 class="standoutHeader title_restorable">
                                <div>
                                    <span data-i18n="Instruct Mode">Instruct Mode</span>
                                    <a href="https://docs.sillytavern.app/usage/core-concepts/instructmode/" class="notes-link" target="_blank">
                                        <span class="fa-solid fa-circle-question note-link-span"></span>
                                    </a>
                                </div>
                                <div class="flex-container">
                                    <i data-newbie-hidden data-preset-manager-import="instruct" class="margin0 menu_button fa-solid fa-file-import" title="Import preset" data-i18n="[title]Import preset"></i>
                                    <i data-newbie-hidden data-preset-manager-export="instruct" class="margin0 menu_button fa-solid fa-file-export" title="Export preset" data-i18n="[title]Export preset"></i>
                                    <i data-newbie-hidden data-preset-manager-restore="instruct" class="margin0 menu_button fa-solid fa-recycle" title="Restore current preset" data-i18n="[title]Restore current preset"></i>
                                    <i data-newbie-hidden data-preset-manager-delete="instruct" class="margin0 menu_button fa-solid fa-trash-can" title="Delete the preset" data-i18n="[title]Delete the preset"></i>
                                </div>
                            </h4>
                            <div class="flex-container">
                                <label for="instruct_enabled" class="checkbox_label flex1">
                                    <input id="instruct_enabled" type="checkbox" />
                                    <span data-i18n="Enabled">Enabled</span>
                                </label>
                                <label for="instruct_bind_to_context" class="checkbox_label flex1" title="If enabled, Context templates will be automatically selected based on selected Instruct template name or by preference." data-i18n="[title]instruct_bind_to_context">
                                    <input id="instruct_bind_to_context" type="checkbox" />
                                    <span data-i18n="Bind to Context">Bind to Context</span>
                                </label>
                            </div>
                            <label for="instruct_presets">
                                <span data-i18n="Presets">Presets</span>
                            </label>
                            <div class="flex-container">
                                <select id="instruct_presets" data-preset-manager-for="instruct" class="flex1 text_pole"></select>
                                <input type="file" hidden data-preset-manager-file="instruct" accept=".json, .settings">
                                <i id="instruct_set_default" class="menu_button fa-solid fa-heart" title="Auto-select this preset on API connection." data-i18n="[title]Auto-select this preset on API connection"></i>
                                <i data-newbie-hidden data-preset-manager-update="instruct" class="menu_button fa-solid fa-save" title="Update current preset" data-i18n="[title]Update current preset"></i>
                                <i data-newbie-hidden data-preset-manager-new="instruct" class="menu_button fa-solid fa-file-circle-plus" title="Save preset as" data-i18n="[title]Save preset as"></i>
                            </div>
                            <label data-newbie-hidden>
                                <small data-i18n="Activation Regex">
                                    Activation Regex
                                </small>
                            </label>
                            <div data-newbie-hidden>
                                <textarea id="instruct_activation_regex" class="text_pole textarea_compact autoSetHeight" maxlength="5000" rows="1"></textarea>
                            </div>
                            <div data-newbie-hidden>
                                <label for="instruct_wrap" class="checkbox_label">
                                    <input id="instruct_wrap" type="checkbox" />
                                    <span data-i18n="Wrap Sequences with Newline">Wrap Sequences with Newline</span>
                                </label>
                                <label for="instruct_macro" class="checkbox_label">
                                    <input id="instruct_macro" type="checkbox" />
                                    <span data-i18n="Replace Macro in Sequences">Replace Macro in Sequences</span>
                                </label>
                                <label for="instruct_skip_examples" class="checkbox_label">
                                    <input id="instruct_skip_examples" type="checkbox" />
                                    <span data-i18n="Skip Example Dialogues Formatting">Skip Example Dialogues Formatting</span>
                                </label>
                                <label for="instruct_names" class="checkbox_label">
                                    <input id="instruct_names" type="checkbox" />
                                    <span data-i18n="Include Names">Include Names</span>
                                </label>
                                <label for="instruct_names_force_groups" class="checkbox_label indent20p">
                                    <input id="instruct_names_force_groups" type="checkbox" />
                                    <span data-i18n="Force for Groups and Personas">Force for Groups and Personas</span>
                                </label>
                            </div>
                            <div data-newbie-hidden>
                                <label>
                                    <small data-i18n="System Prompt">System Prompt</small>
                                </label>
                                <textarea id="instruct_system_prompt" class="text_pole textarea_compact autoSetHeight" rows="1"></textarea>
                            </div>
                            <div data-newbie-hidden class="inline-drawer wide100p flexFlowColumn">
                                <div class="inline-drawer-toggle inline-drawer-header">
                                    <b><span data-i18n="Instruct Mode Sequences">Instruct Mode Sequences</span></b>
                                    <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                                </div>
                                <div class="inline-drawer-content">
                                    <h5 class="textAlignCenter" data-i18n="System Prompt Wrapping">
                                        System Prompt Wrapping
                                    </h5>
                                    <div class="flex-container">
                                        <div class="flex1" title="Inserted before a System prompt." data-i18n="[title]Inserted before a System prompt.">
                                            <label for="instruct_system_sequence_prefix">
                                                <small data-i18n="System Prompt Prefix">System Prompt Prefix</small>
                                            </label>
                                            <div>
                                                <textarea id="instruct_system_sequence_prefix" class="text_pole textarea_compact autoSetHeight" maxlength="2000" placeholder="&mdash;" rows="1"></textarea>
                                            </div>
                                        </div>
                                        <div class="flex1" title="Inserted after a System prompt." data-i18n="[title]Inserted after a System prompt.">
                                            <label for="instruct_system_sequence_suffix">
                                                <small data-i18n="System Prompt Suffix">System Prompt Suffix</small>
                                            </label>
                                            <div>
                                                <textarea id="instruct_system_sequence_suffix" class="text_pole wide100p textarea_compact autoSetHeight" maxlength="2000" placeholder="&mdash;" rows="1"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <h5 class="textAlignCenter" data-i18n="Chat Messages Wrapping">
                                        Chat Messages Wrapping
                                    </h5>
                                    <div class="flex-container">
                                        <div class="flex1" title="Inserted before a User message and as a last prompt line when impersonating." data-i18n="[title]Inserted before a User message and as a last prompt line when impersonating.">
                                            <label for="instruct_input_sequence">
                                                <small data-i18n="User Message Prefix">User Message Prefix</small>
                                            </label>
                                            <div>
                                                <textarea id="instruct_input_sequence" class="text_pole textarea_compact autoSetHeight" maxlength="2000" placeholder="&mdash;" rows="1"></textarea>
                                            </div>
                                        </div>
                                        <div class="flex1" title="Inserted after a User message." data-i18n="[title]Inserted after a User message.">
                                            <label for="instruct_input_suffix">
                                                <small data-i18n="User Message Suffix">User Message Suffix</small>
                                            </label>
                                            <div>
                                                <textarea id="instruct_input_suffix" class="text_pole wide100p textarea_compact autoSetHeight" maxlength="2000" placeholder="&mdash;" rows="1"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex-container">
                                        <div class="flex1" title="Inserted before an Assistant message and as a last prompt line when generating an AI reply." data-i18n="[title]Inserted before an Assistant message and as a last prompt line when generating an AI reply.">
                                            <label for="instruct_output_sequence">
                                                <small data-i18n="Assistant Message Prefix">Assistant Message Prefix</small>
                                            </label>
                                            <div>
                                                <textarea id="instruct_output_sequence" class="text_pole wide100p textarea_compact autoSetHeight" maxlength="2000" placeholder="&mdash;" rows="1"></textarea>
                                            </div>
                                        </div>
                                        <div class="flex1" title="Inserted after an Assistant message." data-i18n="[title]Inserted after an Assistant message.">
                                            <label for="instruct_output_suffix">
                                                <small data-i18n="Assistant Message Suffix">Assistant Message Suffix</small>
                                            </label>
                                            <div>
                                                <textarea id="instruct_output_suffix" class="text_pole wide100p textarea_compact autoSetHeight" maxlength="2000" placeholder="&mdash;" rows="1"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex-container">
                                        <div class="flex1" title="Inserted before a System (added by slash commands or extensions) message." data-i18n="[title]Inserted before a System (added by slash commands or extensions) message.">
                                            <label for="instruct_system_sequence">
                                                <small data-i18n="System Message Prefix">System Message Prefix</small>
                                            </label>
                                            <div>
                                                <textarea id="instruct_system_sequence" class="text_pole textarea_compact autoSetHeight" maxlength="2000" placeholder="&mdash;" rows="1"></textarea>
                                            </div>
                                        </div>
                                        <div class="flex1" title="Inserted after a System message." data-i18n="[title]Inserted after a System message.">
                                            <label for="instruct_system_suffix">
                                                <small data-i18n="System Message Suffix">System Message Suffix</small>
                                            </label>
                                            <div>
                                                <textarea id="instruct_system_suffix" class="text_pole wide100p textarea_compact autoSetHeight" maxlength="2000" placeholder="&mdash;" rows="1"></textarea>
                                            </div>
                                        </div>
                                        <div class="flexBasis100p" title="If enabled, System Sequences will be the same as User Sequences." data-i18n="[title]If enabled, System Sequences will be the same as User Sequences.">
                                            <label class="checkbox_label" for="instruct_system_same_as_user">
                                                <input id="instruct_system_same_as_user" type="checkbox" />
                                                <small data-i18n="System same as User">System same as User</small>
                                            </label>
                                        </div>
                                    </div>
                                    <h5 class="textAlignCenter" data-i18n="Misc. Sequences">
                                        Misc. Sequences
                                    </h5>
                                    <div class="flex-container">
                                        <div class="flex1" title="Inserted before the first Assistant's message." data-i18n="[title]Inserted before the first Assistant's message.">
                                            <label for="instruct_first_output_sequence">
                                                <small data-i18n="First Assistant Prefix">First Assistant Prefix</small>
                                            </label>
                                            <div>
                                                <textarea id="instruct_first_output_sequence" class="text_pole textarea_compact autoSetHeight" maxlength="2000" placeholder="&mdash;" rows="1"></textarea>
                                            </div>
                                        </div>
                                        <div class="flex1" title="Inserted before the last Assistant's message or as a last prompt line when generating an AI reply (except a neutral/system role)." data-i18n="[title]instruct_last_output_sequence">
                                            <label for="instruct_last_output_sequence">
                                                <small data-i18n="Last Assistant Prefix">Last Assistant Prefix</small>
                                            </label>
                                            <div>
                                                <textarea id="instruct_last_output_sequence" class="text_pole wide100p textarea_compact autoSetHeight" maxlength="2000" placeholder="&mdash;" rows="1"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex-container">
                                        <div class="flex1" title="Inserted before the first User's message." data-i18n="[title]Inserted before the first User's message.">
                                            <label for="instruct_first_input_sequence">
                                                <small data-i18n="First User Prefix">First User Prefix</small>
                                            </label>
                                            <div>
                                                <textarea id="instruct_first_input_sequence" class="text_pole textarea_compact autoSetHeight" maxlength="2000" placeholder="&mdash;" rows="1"></textarea>
                                            </div>
                                        </div>
                                        <div class="flex1" title="Inserted before the last User's message." data-i18n="[title]instruct_last_input_sequence">
                                            <label for="instruct_last_input_sequence">
                                                <small data-i18n="Last User Prefix">Last User Prefix</small>
                                            </label>
                                            <div>
                                                <textarea id="instruct_last_input_sequence" class="text_pole wide100p textarea_compact autoSetHeight" maxlength="2000" placeholder="&mdash;" rows="1"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex-container">
                                        <div class="flex1" title="Will be inserted as a last prompt line when using system/neutral generation." data-i18n="[title]Will be inserted as a last prompt line when using system/neutral generation.">
                                            <label for="instruct_last_system_sequence">
                                                <small data-i18n="System Instruction Prefix">System Instruction Prefix</small>
                                            </label>
                                            <div>
                                                <textarea id="instruct_last_system_sequence" class="text_pole textarea_compact autoSetHeight" maxlength="2000" placeholder="&mdash;" rows="1"></textarea>
                                            </div>
                                        </div>
                                        <div class="flex1" title="If a stop sequence is generated, everything past it will be removed from the output (inclusive)." data-i18n="[title]If a stop sequence is generated, everything past it will be removed from the output (inclusive).">
                                            <label for="instruct_stop_sequence">
                                                <small data-i18n="Stop Sequence">Stop Sequence</small>
                                            </label>
                                            <div>
                                                <textarea id="instruct_stop_sequence" class="text_pole textarea_compact autoSetHeight" maxlength="2000" placeholder="&mdash;" rows="1"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex-container">
                                        <div class="flex1" title="Will be inserted at the start of the chat history if it doesn't start with a User message." data-i18n="[title]Will be inserted at the start of the chat history if it doesn't start with a User message.">
                                            <label for="instruct_user_alignment_message">
                                                <small data-i18n="User Filler Message">User Filler Message</small>
                                            </label>
                                            <div>
                                                <textarea id="instruct_user_alignment_message" class="text_pole textarea_compact autoSetHeight" maxlength="2000" placeholder="&mdash;" rows="1"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="ContextFormatting">
                        <div>
                            <div class="flex-container alignItemsBaseline">
                                <h4 data-i18n="Context Formatting">
                                    Context Formatting
                                </h4>
                                <small data-i18n="(Saved to Context Template)">
                                    &nbsp;(Saved to Context Template)
                                </small>
                            </div>
                            <label class="checkbox_label" for="always-force-name2-checkbox">
                                <input id="always-force-name2-checkbox" type="checkbox" />
                                <span data-i18n="Always add character's name to prompt">
                                    Always add character's name to prompt
                                </span>
                            </label>
                            <label class="checkbox_label" for="single_line">
                                <input id="single_line" type="checkbox" />
                                <span data-i18n="Generate only one line per request">
                                    Generate only one line per request
                                </span>
                            </label>
                            <label class="checkbox_label" for="trim_sentences_checkbox">
                                <input id="trim_sentences_checkbox" type="checkbox" />
                                <span data-i18n="Trim Incomplete Sentences">
                                    Trim Incomplete Sentences
                                </span>
                            </label>
                            <!-- Add margin since this is a child of above -->
                            <label data-newbie-hidden class="checkbox_label indent20p" for="include_newline_checkbox">
                                <input id="include_newline_checkbox" type="checkbox" />
                                <span data-i18n="Include Newline">Include Newline</span>
                            </label>
                        </div>
                        <h4 data-i18n="Misc. Settings">
                            Misc. Settings
                        </h4>
                        <label class="checkbox_label" for="collapse-newlines-checkbox">
                            <input id="collapse-newlines-checkbox" type="checkbox" />
                            <span data-i18n="Collapse Consecutive Newlines">
                                Collapse Consecutive Newlines
                            </span>
                        </label>
                        <label data-newbie-hidden class="checkbox_label" for="trim_spaces">
                            <input id="trim_spaces" type="checkbox" />
                            <span data-i18n="Trim spaces">Trim spaces</span>
                        </label>
                        <div data-newbie-hidden>
                            <h4><span data-i18n="Tokenizer">Tokenizer</span>
                                <a href="https://docs.sillytavern.app/usage/core-concepts/advancedformatting/#tokenizer" class="notes-link" target="_blank">
                                    <span class="fa-solid fa-circle-question note-link-span"></span>
                                </a>
                            </h4>
                            <select id="tokenizer">
                                <option value="99">Best match (recommended)</option>
                                <option value="0">None / Estimated</option>
                                <option value="1">GPT-2</option>
                                <!-- Option #2 was a legacy GPT-2/3 tokenizer -->
                                <option value="3">Llama 1/2</option>
                                <option value="12">Llama 3</option>
                                <option value="13">Gemma / Gemini</option>
                                <option value="4">NerdStash (NovelAI Clio)</option>
                                <option value="5">NerdStash v2 (NovelAI Kayra)</option>
                                <option value="7">Mistral</option>
                                <option value="8">Yi</option>
                                <option value="11">Claude 1/2</option>
                                <option value="6">API (WebUI / koboldcpp)</option>
                            </select>
                        </div>
                        <div class="range-block" data-newbie-hidden>
                            <div class="range-block-title justifyLeft">
                                <span data-i18n="Token Padding">Token Padding</span>
                                <a href="https://docs.sillytavern.app/usage/core-concepts/advancedformatting/#token-padding" class="notes-link" target="_blank">
                                    <span class="fa-solid fa-circle-question note-link-span"></span>
                                </a>
                            </div>
                            <input id="token_padding" class="text_pole textarea_compact" type="number" min="-2048" max="2048" />
                        </div>
                        <div class="flex-container flexFlowColumn" data-newbie-hidden>
                            <div>
                                <h4 class="range-block-title justifyLeft">
                                    <span data-i18n="Start Reply With">
                                        Start Reply With
                                    </span>
                                </h4>
                                <div>
                                    <textarea id="start_reply_with" rows="2" class="text_pole textarea_compact" data-i18n="[placeholder]AI reply prefix" placeholder="AI reply prefix"></textarea>
                                </div>
                                <label class="checkbox_label" for="chat-show-reply-prefix-checkbox">
                                    <input id="chat-show-reply-prefix-checkbox" type="checkbox" />
                                    <span data-i18n="Show reply prefix in chat">
                                        Show reply prefix in chat
                                    </span>
                                </label>
                            </div>
                            <div>
                                <h4 class="range-block-title justifyLeft">
                                    <span data-i18n="Non-markdown strings">
                                        Non-markdown strings
                                    </span>
                                </h4>
                                <div>
                                    <input id="markdown_escape_strings" class="text_pole textarea_compact" type="text" data-i18n="[placeholder]separate with commas w/o space between" placeholder="separate with commas w/o space between" maxlength="100" />
                                </div>
                            </div>
                            <div>
                                <h4 class="range-block-title justifyLeft">
                                    <span data-i18n="Custom Stopping Strings">
                                        Custom Stopping Strings
                                    </span>
                                    <a href="https://docs.sillytavern.app/usage/core-concepts/advancedformatting/#custom-stopping-strings" class="notes-link" target="_blank">
                                        <span class="fa-solid fa-circle-question note-link-span"></span>
                                    </a>
                                </h4>
                                <div>
                                    <small>
                                        <span data-i18n="JSON serialized array of strings">JSON serialized array of strings</span>
                                    </small>
                                </div>
                                <div>
                                    <textarea id="custom_stopping_strings" rows="2" class="text_pole textarea_compact monospace" placeholder="[&quot;Ford&quot;, &quot;BMW&quot;, &quot;Fiat&quot;]"></textarea>
                                </div>
                                <label class="checkbox_label" for="custom_stopping_strings_macro">
                                    <input id="custom_stopping_strings_macro" type="checkbox" checked>
                                    <span data-i18n="Replace Macro in Custom Stopping Strings">
                                        Replace Macro in Custom Stopping Strings
                                    </span>
                                </label>
                            </div>
                        </div>
                        <div data-newbie-hidden>
                            <h4>
                                <span data-i18n="Auto-Continue">Auto-Continue</span>
                            </h4>
                            <div class="flex-container">
                                <label class="checkbox_label" for="auto_continue_enabled">
                                    <input id="auto_continue_enabled" type="checkbox" />
                                    <span data-i18n="Enabled">
                                        Enabled
                                    </span>
                                </label>
                                <label class="checkbox_label" for="auto_continue_allow_chat_completions">
                                    <input id="auto_continue_allow_chat_completions" type="checkbox" />
                                    <span data-i18n="Allow for Chat Completion APIs">
                                        Allow for Chat Completion APIs
                                    </span>
                                </label>
                            </div>

                            <div class="auto_continue_settings_block">
                                <label for="auto_continue_target_length">
                                    <span data-i18n="Target length (tokens)">Target length (tokens)</span>
                                    <input id="auto_continue_target_length" type="number" class="text_pole textarea_compact" min="0" max="1024" />
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="WI-SP-button" class="drawer">
            <div class="drawer-toggle drawer-header">
                <div id="WIDrawerIcon" class="drawer-icon fa-solid fa-book-atlas closedIcon " title="World Info" data-i18n="[title]World Info"></div>
            </div>
            <div id="WorldInfo" class="drawer-content closedDrawer">
                <div id="WorldInfoheader" class="fa-solid fa-grip drag-grabber"></div>
                <div id="WI_panel_pin_div" class="flex-container alignitemscenter gap10px" title="Locked = World Editor will stay open" data-i18n="[title]Locked = World Editor will stay open">
                    <input type="checkbox" id="WI_panel_pin">
                    <label for="WI_panel_pin">
                        <div class="unchecked fa-solid fa-unlock "></div>
                        <div class="checked fa-solid fa-lock "></div>
                    </label>
                    <h3 class="margin0">
                        <span data-i18n="Worlds/Lorebooks">Worlds/Lorebooks</span>
                        <a href="https://docs.sillytavern.app/usage/core-concepts/worldinfo/" class="notes-link" target="_blank">
                            <span class="fa-solid fa-circle-question note-link-span"></span>
                        </a>
                    </h3>
                </div>
                <div id="wi-holder" class="margin5">
                    <div id="wiTopBlock" class="flex-container">
                        <div id="WIMultiSelector" class="flex1 flex alignSelfStart range-block">
                            <div class="range-block-title justifyLeft">
                                <span data-i18n="Active World(s) for all chats"><small>Active World(s) for all chats</small></span>
                            </div>
                            <div class="range-block-range">
                                <select id="world_info" class="select2_multi_sameline" multiple>
                                    <option value="" data-i18n="-- World Info not found --">-- World Info not found -- </option>
                                </select>
                            </div>
                        </div>
                        <div class="flex1 flex alignSelfStart range-block">
                            <div class="range-block-title justifyLeft">
                                <small data-i18n="Global World Info/Lorebook activation settings">
                                    Global World Info/Lorebook activation settings
                                </small>
                            </div>
                            <div class="inline-drawer wide100p flexFlowColumn">
                                <div class="standoutHeader inline-drawer-toggle inline-drawer-header">
                                    <b><span data-i18n="Click to expand">Click to expand</span></b>
                                    <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                                </div>
                                <div class="inline-drawer-content">
                                    <div id="wiActivationSettings" class="flex-container">
                                        <div id="wiSliders" class="flex2 flex-container">
                                            <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p">
                                                <small>
                                                    <span data-i18n="Scan Depth">Scan Depth</span>
                                                </small>
                                                <input class="neo-range-slider" type="range" id="world_info_depth" name="world_info_depth" min="0" max="100" step="1">
                                                <input class="neo-range-input" type="number" min="0" max="100" step="1" data-for="world_info_depth" id="world_info_depth_counter">
                                            </div>

                                            <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p">
                                                <small>
                                                    <span data-i18n="Context %">Context %</span>
                                                </small>
                                                <input class="neo-range-slider" type="range" id="world_info_budget" name="world_info_budget" min="1" max="100" step="1">
                                                <input class="neo-range-input" type="number" min="1" max="100" step="1" data-for="world_info_budget" id="world_info_budget_counter">
                                            </div>

                                            <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p">
                                                <small>
                                                    <span data-i18n="Budget Cap">Budget Cap</span>
                                                    <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title](0 = disabled)" title="(0 = disabled)"></div>
                                                </small>
                                                <input class="neo-range-slider" type="range" id="world_info_budget_cap" name="world_info_budget_cap" min="0" max="8192" step="1">
                                                <input class="neo-range-input" type="number" min="0" max="8192" step="1" data-for="world_info_budget_cap" id="world_info_budget_cap_counter">
                                            </div>

                                            <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p" title="Scan chronologically until reached min entries or token budget." data-i18n="[title]Scan chronologically until reached min entries or token budget.">
                                                <small>
                                                    <span data-i18n="Min Activations">Min Activations</span>
                                                    <div class="fa-solid fa-triangle-exclamation opacity50p" data-i18n="[title](disabled when max recursion steps are used)" title="(disabled when max recursion steps are used)"></div>
                                                </small>
                                                <input class="neo-range-slider" type="range" id="world_info_min_activations" name="world_info_min_activations" min="0" max="100" step="1">
                                                <input class="neo-range-input" type="number" min="0" max="100" step="1" data-for="world_info_min_activations" id="world_info_min_activations_counter">
                                            </div>

                                            <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p" title="Scan chronologically until reached min entries or token budget." data-i18n="[title]Scan chronologically until reached min entries or token budget.">
                                                <small>
                                                    <span data-i18n="Max Depth">Max Depth</span>
                                                    <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title](0 = unlimited, use budget)" title="(0 = unlimited, use budget)"></div>
                                                </small>
                                                <input class="neo-range-slider" type="range" id="world_info_min_activations_depth_max" name="volume" min="0" max="100" step="1">
                                                <input class="neo-range-input" type="number" min="0" max="100" step="1" data-for="world_info_min_activations_depth_max" id="world_info_min_activations_depth_max_counter">
                                            </div>
                                            <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p" title="Cap the number of entry activation recursions" data-i18n="[title]Cap the number of entry activation recursions">
                                                <small>
                                                    <span data-i18n="Max Recursion Steps">Max Recursion Steps</span>
                                                    <div class="fa-solid fa-triangle-exclamation opacity50p" data-i18n="[title]0 = unlimited, 1 = scans once and doesn't recurse, 2 = scans once and recurses once, etc\n(disabled when min activations are used)" title="0 = unlimited, 1 = scans once and doesn't recurse, 2 = scans once and recurses once, etc&#10;(disabled when min activations are used)"></div>
                                                </small>
                                                <input class="neo-range-slider" type="range" id="world_info_max_recursion_steps" name="world_info_max_recursion_steps" min="0" max="10" step="1">
                                                <input class="neo-range-input" type="number" min="0" max="10" step="1" data-for="world_info_max_recursion_steps" id="world_info_max_recursion_steps_counter">
                                            </div>

                                            <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink flexBasis48p">
                                                <small data-i18n="Insertion Strategy">
                                                    Insertion Strategy
                                                </small>
                                                <select id="world_info_character_strategy" class="flexGrow margin0">
                                                    <option value="0" data-i18n="Sorted Evenly">Sorted Evenly</option>
                                                    <option value="1" data-i18n="Character Lore First">Character Lore First</option>
                                                    <option value="2" data-i18n="Global Lore First">Global Lore First</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div id="wiCheckboxes" class="flex1 flex-container flexFlowColumn">
                                            <label title="Include names with each message into the context for scanning" data-i18n="[title]Include names with each message into the context for scanning" class="checkbox_label flex1">
                                                <input id="world_info_include_names" type="checkbox" />
                                                <small data-i18n="Include Names" class="whitespacenowrap flex1">
                                                    Include Names
                                                </small>
                                            </label>
                                            <label title="Entries can activate other entries by mentioning their keywords" data-i18n="[title]Entries can activate other entries by mentioning their keywords" class="checkbox_label flex1">
                                                <input id="world_info_recursive" type="checkbox" />
                                                <small data-i18n="Recursive Scan" class="whitespacenowrap flex1">
                                                    Recursive Scan
                                                </small>
                                            </label>
                                            <label title="Lookup for the entry keys in the context will respect the case" data-i18n="[title]Lookup for the entry keys in the context will respect the case" class="checkbox_label flex1">
                                                <input id="world_info_case_sensitive" type="checkbox" />
                                                <small data-i18n="Case Sensitive" class="whitespacenowrap flex1">
                                                    Case-sensitive
                                                </small>
                                            </label>
                                            <label title="If the entry key consists of only one word, it would not be matched as part of other words" data-i18n="[title]If the entry key consists of only one word, it would not be matched as part of other words" class="checkbox_label flex1">
                                                <input id="world_info_match_whole_words" type="checkbox" />
                                                <small data-i18n="Match Whole Words" class="whitespacenowrap flex1">
                                                    Match Whole Words
                                                </small>
                                            </label>
                                            <label title="Only the entries with the most number of key matches will be selected for Inclusion Group filtering" data-i18n="[title]Only the entries with the most number of key matches will be selected for Inclusion Group filtering" class="checkbox_label flex1">
                                                <input id="world_info_use_group_scoring" type="checkbox" />
                                                <small data-i18n="Use Group Scoring" class="whitespacenowrap flex1">
                                                    Use Group Scoring
                                                </small>
                                            </label>
                                            <label title="Alert if your world info is greater than the allocated budget." data-i18n="[title]Alert if your world info is greater than the allocated budget." class="checkbox_label flex1">
                                                <input id="world_info_overflow_alert" type="checkbox" />
                                                <small data-i18n="Alert On Overflow" class="whitespacenowrap flex1">
                                                    Alert On Overflow
                                                </small>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="world_popup">
                        <hr>
                        <div class="flex-container alignitemscenter gap3px">
                            <input type="file" id="world_import_file" accept=".json,.lorebook,.png" name="avatar" hidden>
                            <div id="world_create_button" class="menu_button menu_button_icon">
                                <i class="fa-solid fa-globe"></i>
                                <span data-i18n="New">New</span>
                            </div>
                            <small data-i18n="or">or</small>
                            <select id="world_editor_select" class="margin0">
                                <option value="" data-i18n="--- Pick to Edit ---">--- Pick to Edit ---</option>
                            </select>
                            <div id="world_popup_name_button" class="menu_button fa-pencil fa-solid" title="Rename World Info" data-i18n="[title]Rename World Info"></div>
                            <div id="OpenAllWIEntries" class="menu_button fa-solid fa-expand" title="Open all Entries" data-i18n="[title]Open all Entries"></div>
                            <div id="CloseAllWIEntries" class="menu_button fa-solid fa-compress" title="Close all Entries" data-i18n="[title]Close all Entries"></div>
                            <div id="world_popup_new" class="menu_button fa-solid fa-plus" title="New Entry" data-i18n="[title]New Entry"></div>
                            <div id="world_backfill_memos" class="menu_button fa-solid fa-notes-medical" title="Fill empty Memo/Titles with Keywords" data-i18n="[title]Fill empty Memo/Titles with Keywords"></div>
                            <div id="world_apply_current_sorting" class="menu_button fa-solid fa-solid fa-arrow-down-9-1" title="Apply current sorting as Order" data-i18n="[title]Apply current sorting as Order"></div>
                            <div id="world_import_button" class="menu_button fa-solid fa-file-import" title="Import World Info" data-i18n="[title]Import World Info"></div>
                            <div id="world_popup_export" class="menu_button fa-solid fa-file-export" title="Export World Info" data-i18n="[title]Export World Info"></div>
                            <div id="world_duplicate" class="menu_button fa-solid fa-paste" title="Duplicate World Info" data-i18n="[title]Duplicate World Info"></div>
                            <div id="world_popup_delete" class="menu_button fa-solid fa-trash-can redWarningBG" title="Delete World Info" data-i18n="[title]Delete World Info"></div>
                            <input type="search" class="text_pole textarea_compact" data-i18n="[placeholder]Search..." id="world_info_search" placeholder="Search...">
                            <select id="world_info_sort_order" class="margin0">
                                <option data-rule="search" value="14" data-i18n="Search" hidden>Search</option>
                                <option data-rule="priority" value="0" data-i18n="Priority">Priority</option>
                                <option data-rule="custom" value="13" data-i18n="Custom">Custom</option>
                                <option data-order="asc" data-field="comment" value="1" data-i18n="Title A-Z">Title A-Z</option>
                                <option data-order="desc" data-field="comment" value="2" data-i18n="Title Z-A">Title Z-A</option>
                                <option data-order="asc" data-field="content" data-rule="length" value="3" data-i18n="Tokens ↗">Tokens ↗</option>
                                <option data-order="desc" data-field="content" data-rule="length" value="4" data-i18n="Tokens ↘">Tokens ↘</option>
                                <option data-order="asc" data-field="depth" value="5" data-i18n="Depth ↗">Depth ↗</option>
                                <option data-order="desc" data-field="depth" value="6" data-i18n="Depth ↘">Depth ↘</option>
                                <option data-order="asc" data-field="order" value="7" data-i18n="Order ↗">Order ↗</option>
                                <option data-order="desc" data-field="order" value="8" data-i18n="Order ↘">Order ↘</option>
                                <option data-order="asc" data-field="uid" value="9" data-i18n="UID ↗">UID ↗</option>
                                <option data-order="desc" data-field="uid" value="10" data-i18n="UID ↘">UID ↘</option>
                                <option data-order="asc" data-field="probability" value="11" data-i18n="Trigger% ↗">Trigger% ↗</option>
                                <option data-order="desc" data-field="probability" value="12" data-i18n="Trigger% ↘">Trigger% ↘</option>
                            </select>
                            <div id="world_refresh" class="menu_button fa-solid fa-arrows-rotate" title="Refresh" data-i18n="[title]Refresh"></div>
                            <div id="world_info_pagination"></div>
                        </div>
                        <div id="world_popup_entries_list">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="user-settings-button" class="drawer">
            <div class="drawer-toggle">
                <div class="drawer-icon fa-solid fa-user-cog closedIcon" title="User Settings" data-i18n="[title]User Settings"></div>
            </div>
            <div id="user-settings-block" class="drawer-content closedDrawer">
                <div class="flex-container flexFlowColumn">
                    <div name="userSettingsRowOne" class="flex-container flexFlowRow alignitemscenter spaceBetween">
                        <div class="flex-container">
                            <div class="flex-container flexnowrap alignItemsBaseline">
                                <h3 class="margin0"><span data-i18n="User Settings">User Settings</span></h3>
                                <select id="ui_mode_select" class="margin0 widthNatural">
                                    <option value="0" data-i18n="Simple">Simple</option>
                                    <option value="1" data-i18n="Advanced">Advanced</option>
                                </select>
                            </div>
                        </div>
                        <div id="UI-language-block" class="flex-container alignItemsBaseline">
                            <span data-i18n="UI Language">Language:</span>
                            <select id="ui_language_select" class="flex1 margin0">
                                <option value="" data-i18n="Default">Default</option>
                                <option value="en">English</option>
                            </select>
                        </div>
                        <small id="version_display"></small>
                    </div>
                    <div name="UserSettingsRowTwo" class="flex-container flexFlowRow">
                        <div id="account_controls" class="flex-container">
                            <div id="account_button" class="margin0 menu_button_icon menu_button">
                                <i class="fa-fw fa-solid fa-user-shield"></i>
                                <span data-i18n="Account">Account</span>
                            </div>
                            <div id="admin_button" class="margin0 menu_button_icon menu_button">
                                <i class="fa-fw fa-solid fa-user-tie"></i>
                                <span data-i18n="Admin Panel">Admin Panel</span>
                            </div>
                            <div id="logout_button" class="margin0 menu_button_icon menu_button">
                                <i class="fa-fw fa-solid fa-right-from-bracket"></i>
                                <span data-i18n="Logout">Logout</span>
                            </div>
                        </div>
                        <textarea id="settingsSearch" class="textarea_compact flex1" rows="1" placeholder="Search Settings" data-i18n="[placeholder]Search Settings"></textarea>
                    </div>
                </div>
                <div id="user-settings-block-content" class="flex-container spaceEvenly">
                    <div name="UserSettingsFirstColumn" id="UI-Theme-Block" class="flex-container flexFlowColumn wide100p">
                        <div id="UI-presets-block" class="flex-container flexFlowColumn">
                            <h4 class="title_restorable">
                                <span data-i18n="UI Theme">UI Theme</span>
                                <div class="flex-container">
                                    <div id="ui_preset_import_button" class="menu_button menu_button_icon margin0" title="Import a theme file" data-i18n="[title]Import a theme file">
                                        <i class="fa-solid fa-file-import"></i>
                                    </div>
                                    <div id="ui_preset_export_button" class="menu_button menu_button_icon margin0" title="Export a theme file" data-i18n="[title]Export a theme file">
                                        <i class="fa-solid fa-file-export"></i>
                                    </div>
                                    <div id="ui-preset-delete-button" class="menu_button menu_button_icon margin0" title="Delete a theme" data-i18n="[title]Delete a theme">
                                        <i class="fa-solid fa-trash-can"></i>
                                    </div>
                                </div>
                                <input type="file" id="ui_preset_import_file" accept=".json" hidden>
                            </h4>
                            <div class="flex-container flexnowrap alignitemscenter">
                                <select id="themes" class="margin0">
                                </select>
                                <div id="ui-preset-update-button" title="Update a theme file" data-i18n="[title]Update a theme file" class="menu_button margin0">
                                    <i class="fa-solid fa-save"></i>
                                </div>
                                <div id="ui-preset-save-button" title="Save as a new theme" data-i18n="[title]Save as a new theme" class="menu_button margin0">
                                    <i class="fa-solid fa-file-circle-plus"></i>
                                </div>
                            </div>
                        </div>
                        <div name="themeElements" data-newbie-hidden class="flex-container flexFlowColumn flexNoGap">
                            <!-- <h4><span data-i18n="UI Colors">Theme Settings</span></h4> -->
                            <div name="AvatarAndChatDisplay" class="flex-container flexFlowColumn">
                                <div class="flex-container">
                                    <span data-i18n="Avatar Style">Avatars:</span>
                                    <select id="avatar_style" class="widthNatural flex1 margin0">
                                        <option value="0" data-i18n="Circle">Circle</option>
                                        <option value="2" data-i18n="Square">Square</option>
                                        <option value="1" data-i18n="Rectangle">Rectangle</option>
                                    </select>
                                </div>
                                <div class="flex-container">
                                    <span data-i18n="Chat Style:">Chat Style:</span><br>
                                    <select id="chat_display" class="widthNatural flex1 margin0">
                                        <option value="0" data-i18n="Flat">Flat</span>
                                        <option value="1" data-i18n="Bubbles">Bubbles</option>
                                        <option value="2" data-i18n="Document">Document</option>
                                    </select>
                                </div>
                            </div>
                            <div data-newbie-hidden class="inline-drawer wide100p flexFlowColumn">
                                <div class="inline-drawer-toggle inline-drawer-header userSettingsInnerExpandable" title="Specify colors for your theme." data-i18n="[title]Specify colors for your theme.">
                                    <b><span data-i18n="Theme Colors">Theme Colors</span></b>
                                    <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                                </div>
                                <div class="inline-drawer-content">
                                    <div id="color-picker-block" class="flex-container flexFlowColumn flexNoGap">
                                        <div class="flex-container">
                                            <toolcool-color-picker id="main-text-color-picker"></toolcool-color-picker>
                                            <span data-i18n="Main Text">Main Text</span>
                                        </div>
                                        <div class="flex-container">
                                            <toolcool-color-picker id="italics-color-picker"></toolcool-color-picker>
                                            <span data-i18n="Italics Text">Italics Text</span>
                                        </div>
                                        <div class="flex-container">
                                            <toolcool-color-picker id="underline-color-picker"></toolcool-color-picker>
                                            <span data-i18n="Underlined Text">Underlined Text</span>
                                        </div>
                                        <div class="flex-container">
                                            <toolcool-color-picker id="quote-color-picker"></toolcool-color-picker>
                                            <span data-i18n="Quote Text">Quote Text</span>
                                        </div>
                                        <div class="flex-container">
                                            <toolcool-color-picker id="shadow-color-picker"></toolcool-color-picker>
                                            <span data-i18n="Shadow Color">Text Shadow</span>
                                        </div>
                                        <div class="flex-container">
                                            <toolcool-color-picker id="chat-tint-color-picker"></toolcool-color-picker>
                                            <span data-i18n="Chat Background">Chat Background</span>
                                        </div>
                                        <div class="flex-container">
                                            <toolcool-color-picker id="blur-tint-color-picker"></toolcool-color-picker>
                                            <span data-i18n="UI Background">UI Background</span>
                                        </div>
                                        <div class="flex-container">
                                            <toolcool-color-picker id="border-color-picker"></toolcool-color-picker>
                                            <span data-i18n="UI Border">UI Border</span>
                                        </div>
                                        <div class="flex-container">
                                            <toolcool-color-picker id="user-mes-blur-tint-color-picker"></toolcool-color-picker>
                                            <span data-i18n="User Message Blur Tint">User Message</span>
                                        </div>
                                        <div class="flex-container">
                                            <toolcool-color-picker id="bot-mes-blur-tint-color-picker"></toolcool-color-picker>
                                            <span data-i18n="AI Message Blur Tint">AI Message</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div data-newbie-hidden name="FontBlurChatWidthBlock" class="flex-container">

                                <div class="alignitemscenter flex-container flexFlowColumn flexBasis48p flexGrow flexShrink gap0">
                                    <small>
                                        <span data-i18n="Chat Width">Chat Width <i class="fa-solid fa-desktop"></i></span>
                                        <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]Width of the main chat window in % of screen width" title="Width of the main chat window in % of screen width"></div>
                                    </small>
                                    <input class="neo-range-slider" type="range" id="chat_width_slider" name="chat_width_slider" min="25" max="100" step="1">
                                    <input class="neo-range-input" type="number" min="25" max="100" step="1" data-for="chat_width_slider" id="chat_width_slider_counter">
                                </div>

                                <div class="alignitemscenter flex-container flexFlowColumn flexBasis48p flexGrow flexShrink gap0">
                                    <small>
                                        <span data-i18n="Font Scale">Font Scale</span>
                                        <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]Font size" title="Font size"></div>
                                    </small>
                                    <input class="neo-range-slider" type="range" id="font_scale" name="font_scale" min="0.8" max="1.2" step="0.01">
                                    <input class="neo-range-input" type="number" min="0.8" max="1.2" step="0.01" data-for="font_scale" id="font_scale_counter">
                                </div>

                                <div class="alignitemscenter flex-container flexFlowColumn flexBasis48p flexGrow flexShrink gap0">
                                    <small>
                                        <span data-i18n="Blur Strength">Blur Strength</span>
                                        <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]Blur strength on UI panels." title="Blur strength on UI panels."></div>
                                    </small>
                                    <input class="neo-range-slider" type="range" id="blur_strength" name="blur_strength" min="0" max="30" step="1">
                                    <input class="neo-range-input" type="number" min="0" max="30" step="1" data-for="blur_strength" id="blur_strength_counter">
                                </div>

                                <div class="alignitemscenter flex-container flexFlowColumn flexBasis48p flexGrow flexShrink gap0">
                                    <small>
                                        <span data-i18n="Text Shadow Width">Shadow Width</span>
                                        <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]Strength of the text shadows" title="Strength of the text shadows"></div>
                                    </small>
                                    <input class="neo-range-slider" type="range" id="shadow_width" name="shadow_width" min="0" max="5" step="1">
                                    <input class="neo-range-input" type="number" min="0" max="5" step="1" data-for="shadow_width" id="shadow_width_counter">
                                </div>
                            </div>
                            <hr>
                            <div name="themeToggles">
                                <!-- <h4 data-i18n="Theme Toggles">Theme Toggles</h4> -->

                                <label for="reduced_motion" class="checkbox_label" title="Disable animations and transitions" data-i18n="[title]Disables animations and transitions">
                                    <input id="reduced_motion" type="checkbox" />
                                    <small data-i18n="Reduced Motion">Reduced Motion</small>
                                </label>
                                <label data-newbie-hidden for="fast_ui_mode" class="checkbox_label" title="Remove blur from window backgrounds, for faster rendering." data-i18n="[title]removes blur from window backgrounds">
                                    <input id="fast_ui_mode" type="checkbox" />
                                    <small data-i18n="No Blur Effect">No Blur Effect</small>
                                </label>
                                <label data-newbie-hidden for="noShadowsmode" class="checkbox_label" title="Remove text shadow effect." data-i18n="[title]Remove text shadow effect">
                                    <input id="noShadowsmode" type="checkbox" />
                                    <small data-i18n="No Text Shadows">No Text Shadows</small>
                                </label>
                                <label for="waifuMode" class="checkbox_label" title="Reduce chat height, and put a static sprite behind the chat window." data-i18n="[title]Reduce chat height, and put a static sprite behind the chat window">
                                    <input id="waifuMode" type="checkbox" />
                                    <small data-i18n="Waifu Mode">Visual Novel Mode</small>
                                </label>
                                <label data-newbie-hidden for="expandMessageActions" class="checkbox_label" title="Always show the full list of the Message Actions context items for chat messages, instead of hiding them behind '...'." data-i18n="[title]Always show the full list of the Message Actions context items for chat messages, instead of hiding them behind '...'">
                                    <input id="expandMessageActions" type="checkbox" />
                                    <small data-i18n="Auto-Expand Message Actions">Expand Message Actions</small>
                                </label>
                                <label data-newbie-hidden for="enableZenSliders" class="checkbox_label" title="Alternative UI for numeric sampling parameters with fewer steps." data-i18n="[title]Alternative UI for numeric sampling parameters with fewer steps">
                                    <input id="enableZenSliders" type="checkbox" />
                                    <small data-i18n="Zen Sliders">Zen Sliders</small>
                                </label>
                                <label data-newbie-hidden for="enableLabMode" class="checkbox_label" title="Entirely unrestrict all numeric sampling parameters." data-i18n="[title]Entirely unrestrict all numeric sampling parameters">
                                    <input id="enableLabMode" type="checkbox" />
                                    <small data-i18n="Mad Lab Mode">Mad Lab Mode</small>
                                </label>
                                <label data-newbie-hidden for="messageTimerEnabled" class="checkbox_label" title="Time the AI's message generation, and show the duration in the chat log." data-i18n="[title]Time the AI's message generation, and show the duration in the chat log">
                                    <input id="messageTimerEnabled" type="checkbox" />
                                    <small data-i18n="Message Timer">Message Timer</small>
                                </label>
                                <label data-newbie-hidden for="messageTimestampsEnabled" class="checkbox_label" title="Show a timestamp for each message in the chat log." data-i18n="[title]Show a timestamp for each message in the chat log">
                                    <input id="messageTimestampsEnabled" type="checkbox" />
                                    <small data-i18n="Chat Timestamps">Chat Timestamps</small>
                                </label>
                                <label data-newbie-hidden for="messageModelIconEnabled" class="checkbox_label" title="Show an icon for the API that generated the message." data-i18n="[title]Show an icon for the API that generated the message">
                                    <input id="messageModelIconEnabled" type="checkbox" />
                                    <small data-i18n="Model Icon">Model Icons</small>
                                </label>
                                <label data-newbie-hidden for="mesIDDisplayEnabled" class="checkbox_label" title="Show sequential message numbers in the chat log." data-i18n="[title]Show sequential message numbers in the chat log">
                                    <input id="mesIDDisplayEnabled" type="checkbox" />
                                    <small data-i18n="Message IDs">Message IDs</small>
                                </label>
                                <label data-newbie-hidden for="hideChatAvatarsEnabled" class="checkbox_label" title="Hide avatars in chat messages." data-i18n="[title]Hide avatars in chat messages.">
                                    <input id="hideChatAvatarsEnabled" type="checkbox" />
                                    <small data-i18n="Hide Chat Avatars">Hide Chat Avatars</small>
                                </label>
                                <label data-newbie-hidden for="messageTokensEnabled" class="checkbox_label" title="Show the number of tokens for each message in the chat log." data-i18n="[title]Show the number of tokens in each message in the chat log">
                                    <input id="messageTokensEnabled" type="checkbox" />
                                    <small data-i18n="Show Message Token Count">Message Token Count</small>
                                </label>
                                <label for="compact_input_area" class="checkbox_label" title="Single-row message input area. Mobile only, no effect on PC." data-i18n="[title]Single-row message input area. Mobile only, no effect on PC">
                                    <input id="compact_input_area" type="checkbox" />
                                    <small data-i18n="Compact Input Area (Mobile)">Compact Input Area</small><i class="fa-solid fa-mobile-screen-button"></i>
                                </label>
                                <label data-newbie-hidden for="hotswapEnabled" class="checkbox_label" title="In the Character Management panel, show quick selection buttons for favorited characters." data-i18n="[title]In the Character Management panel, show quick selection buttons for favorited characters">
                                    <input id="hotswapEnabled" type="checkbox" />
                                    <small data-i18n="Characters Hotswap">Characters Hotswap</small>
                                </label>
                                <label for="zoomed_avatar_magnification" class="checkbox_label" title="Enable magnification for zoomed avatar display." data-i18n="[title]Enable magnification for zoomed avatar display.">
                                    <input id="zoomed_avatar_magnification" type="checkbox" />
                                    <small data-i18n="Avatar Hover Magnification">Avatar Hover Magnification</small>
                                    <i title="Enables a magnification effect on hover when you display the zoomed avatar after clicking an avatar's image in chat." data-i18n="[title]Enables a magnification effect on hover when you display the zoomed avatar after clicking an avatar's image in chat." class="right_menu_button fa-solid fa-circle-exclamation"></i>
                                </label>
                                <label for="bogus_folders" class="checkbox_label" title="Show tagged character folders in the character list." data-i18n="[title]Show tagged character folders in the character list">
                                    <input id="bogus_folders" type="checkbox" />
                                    <small data-i18n="Tags as Folders">Tags as Folders</small>
                                    <i title="Recent change: Tags must be marked as folders in the Tag Management menu to appear as such. Click here to bring it up." data-i18n="[title]Tags_as_Folders_desc" class="tags_view right_menu_button fa-solid fa-circle-exclamation"></i>
                                </label>

                            </div>


                        </div>
                    </div>
                    <div name="UserSettingsSecondColumn" id="UI-Customization" class="flex-container flexFlowColumn wide100p flexNoGap">
                        <div data-newbie-hidden name="CharacterHandlingToggles">
                            <h4 data-i18n="Character Handling">
                                Character Handling
                            </h4>
                            <div class="flex-container alignitemscenter" title="If set in the advanced character definitions, this field will be displayed in the characters list." data-i18n="[title]If set in the advanced character definitions, this field will be displayed in the characters list.">
                                <label for="aux_field"><small data-i18n="Char List Subheader">Char List Subheader</small></label>
                                <select id="aux_field" class="widthNatural flex1 margin0">
                                    <option data-i18n="Character Version" value="character_version">Character Version</option>
                                    <option data-i18n="Created by" value="creator">Created by</option>
                                </select>
                            </div>
                            <div data-newbie-hidden class="flex-container alignitemscenter" title="Defines on importing cards which action should be chosen for importing its listed tags. 'Ask' will always display the dialog." data-i18n="[title]Defines on importing cards which action should be chosen for importing its listed tags. 'Ask' will always display the dialog.">
                                <label for="tag_import_setting"><small data-i18n="Import Card Tags">Import Card Tags</small></label>
                                <select id="tag_import_setting" class="widthNatural flex1 margin0">
                                    <option data-i18n="Ask" value="1">Ask</option>
                                    <option data-i18n="tag_import_none" value="2">None</option>
                                    <option data-i18n="tag_import_all" value="3">All</option>
                                    <option data-i18n="Existing" value="4">Existing</option>
                                </select>
                            </div>
                            <label data-newbie-hidden class="checkbox_label" for="fuzzy_search_checkbox" title="Use fuzzy matching, and search characters in the list by all data fields, not just by a name substring." data-i18n="[title]Use fuzzy matching, and search characters in the list by all data fields, not just by a name substring">
                                <input id="fuzzy_search_checkbox" type="checkbox" />
                                <small data-i18n="Advanced Character Search">Advanced Character Search</small>
                            </label>
                            <label data-newbie-hidden for="prefer_character_prompt" title="If checked and the character card contains a prompt override (System Prompt), use that instead." data-i18n="[title]If checked and the character card contains a prompt override (System Prompt), use that instead" class="checkbox_label">
                                <input id="prefer_character_prompt" type="checkbox" />
                                <small data-i18n="Prefer Character Card Prompt">Prefer Char. Prompt</small>
                            </label>
                            <label data-newbie-hidden for="prefer_character_jailbreak" title="If checked and the character card contains a Post-History Instructions override, use that instead." data-i18n="[title]If checked and the character card contains a Post-History Instructions override, use that instead" class="checkbox_label">
                                <input id="prefer_character_jailbreak" type="checkbox" />
                                <small data-i18n="Prefer Character Card Instructions">Prefer Char. Instructions</small>
                            </label>
                            <label data-newbie-hidden class="checkbox_label" for="never_resize_avatars" title="Avoid cropping and resizing imported character images. When off, crop/resize to 512x768." data-i18n="[title]Avoid cropping and resizing imported character images. When off, crop/resize to 512x768">
                                <input id="never_resize_avatars" type="checkbox" />
                                <small data-i18n="Never resize avatars">Never resize avatars</small>
                            </label>
                            <label data-newbie-hidden class="checkbox_label" for="show_card_avatar_urls" title="Show actual file names on the disk, in the characters list display only." data-i18n="[title]Show actual file names on the disk, in the characters list display only">
                                <input id="show_card_avatar_urls" type="checkbox" />
                                <small data-i18n="Show avatar filenames">Show avatar filenames</small>
                            </label>
                            <label data-newbie-hidden class="checkbox_label" for="spoiler_free_mode" title="Hide character definitions from the editor panel behind a spoiler button." data-i18n="[title]Hide character definitions from the editor panel behind a spoiler button">
                                <input id="spoiler_free_mode" type="checkbox" />
                                <small data-i18n="Spoiler Free Mode">Spoiler Free Mode</small>
                            </label>

                        </div>

                        <div name="MiscellaneousToggles">
                            <h4><span data-i18n="Miscellaneous">Miscellaneous</span></h4>
                            <div data-newbie-hidden class="flex-container">
                                <div id="reload_chat" class="menu_button whitespacenowrap" data-i18n="[title]Reload and redraw the currently open chat" title="Reload and redraw the currently open chat.">
                                    <small data-i18n="Reload Chat">Reload Chat</small>
                                </div>
                                <div id="debug_menu" class="menu_button whitespacenowrap" data-i18n="Debug Menu">
                                    <small data-i18n="Debug Menu">Debug Menu</small>
                                </div>
                            </div>
                            <label class="checkbox_label flexWrap" for="smooth_streaming">
                                <input id="smooth_streaming" type="checkbox" />
                                <div class="flex-container alignItemsBaseline">
                                    <small data-i18n="Smooth Streaming">
                                        Smooth Streaming
                                    </small>
                                    <i class="fa-solid fa-flask" data-i18n="[title]Experimental feature. May not work for all backends." title="Experimental feature. May not work for all backends."></i>
                                </div>
                                <div id="smooth_streaming_speed_control" class="flexBasis100p wide100p">
                                    <input type="range" id="smooth_streaming_speed" name="smooth_streaming_speed" min="0" max="100" step="10" value="50">
                                    <div class="slider_hint">
                                        <span data-i18n="Slow">Slow</span>
                                        <span></span>
                                        <span data-i18n="Fast">Fast</span>
                                    </div>
                                </div>
                            </label>

                            <label for="play_message_sound" class="checkbox_label" title="Play a sound when a message generation finishes." data-i18n="[title]Play a sound when a message generation finishes">
                                <input id="play_message_sound" type="checkbox" />
                                <audio id="audio_message_sound" src="sounds/message.mp3" hidden></audio>
                                <span>
                                    <small data-i18n="Message Sound">Message Sound</small>
                                    <a href="https://docs.sillytavern.app/usage/core-concepts/uicustomization/#message-sound" class="notes-link" target="_blank">
                                        <span class="fa-solid fa-circle-question note-link-span"></span>
                                    </a>
                                </span>
                            </label>
                            <label for="play_sound_unfocused" class="checkbox_label" title="Only play a sound when ST's browser tab is unfocused." data-i18n="[title]Only play a sound when ST's browser tab is unfocused">
                                <input id="play_sound_unfocused" type="checkbox" />
                                <small data-i18n="Background Sound Only">Background Sound Only</small>
                            </label>
                            <label data-newbie-hidden class="checkbox_label" for="relaxed_api_urls" title="Reduce the formatting requirements on API URLs." data-i18n="[title]Reduce the formatting requirements on API URLs">
                                <input id="relaxed_api_urls" type="checkbox" />
                                <small data-i18n="Relaxed API URLS">Relaxed API URLs</small>
                            </label>
                            <label data-newbie-hidden class="checkbox_label" for="world_import_dialog" title="Ask to import the World Info/Lorebook for every new character with embedded lorebook. If unchecked, a brief message will be shown instead." data-i18n="[title]Ask to import the World Info/Lorebook for every new character with embedded lorebook. If unchecked, a brief message will be shown instead">
                                <input id="world_import_dialog" type="checkbox" />
                                <small data-i18n="Lorebook Import Dialog">Lorebook Import Dialog</small>
                            </label>
                            <label data-newbie-hidden class="checkbox_label" for="enable_auto_select_input" title="Enable auto-select of input text in some text fields when clicking/selecting them. Applies to popup input textboxes, and possible other custom input fields." data-i18n="[title]Enable auto-select of input text in some text fields when clicking/selecting them. Applies to popup input textboxes, and possible other custom input fields.">
                                <input id="enable_auto_select_input" type="checkbox" />
                                <small data-i18n="Auto-select Input Text">Auto-select Input Text</small>
                            </label>
                            <label class="checkbox_label" for="restore_user_input" title="Restore unsaved user input on page refresh." data-i18n="[title]Restore unsaved user input on page refresh">
                                <input id="restore_user_input" type="checkbox" />
                                <small data-i18n="Restore User Input">Restore User Input</small>
                            </label>
                            <div class="flex-container alignItemsCenter">
                                <label data-newbie-hidden id="movingUIModeCheckBlock" for="movingUImode" class="checkbox_label" title="Allow repositioning certain UI elements by dragging them. PC only, no effect on mobile." data-i18n="[title]Allow repositioning certain UI elements by dragging them. PC only, no effect on mobile">
                                    <input id="movingUImode" type="checkbox" />
                                    <small data-i18n="Movable UI Panels">MovingUI&nbsp;<i class="fa-solid fa-desktop"></i></small>
                                </label>
                                <div data-newbie-hidden id="movingUIreset" title="Reset MovingUI panel sizes/locations." class="menu_button margin0" data-i18n="[title]Reset MovingUI panel sizes/locations."><i class=" fa-solid fa-recycle margin-r5"></i> Reset</div>
                            </div>
                            <div data-newbie-hidden id="MovingUI-presets-block" class="flex-container alignitemscenter">
                                <div class="flex-container alignItemsFlexEnd">
                                    <label for="movingUIPresets" title="MovingUI preset. Predefined/saved draggable positions." data-i18n="[title]MovingUI preset. Predefined/saved draggable positions">
                                        <small data-i18n="MUI Preset">MovingUI Preset:</small>
                                        <div class="flex-container flexnowrap">
                                            <select id="movingUIPresets" class="widthNatural flex1 margin0">
                                            </select>
                                        </div>
                                    </label>
                                    <div id="movingui-preset-save-button" title="Save changes to a new MovingUI preset file." data-i18n="[title]Save movingUI changes to a new file" class="menu_button margin0 fa-solid fa-save"></div>
                                </div>
                            </div>
                            <div data-newbie-hidden id="CustomCSS-block" class="flex-container flexFlowColumn">
                                <h4 class="title_restorable" title="Apply a custom CSS style to all of the ST GUI." data-i18n="[title]Apply a custom CSS style to all of the ST GUI">
                                    <span data-i18n="Custom CSS">Custom CSS</span>
                                    <i class="editor_maximize fa-solid fa-maximize right_menu_button" data-for="customCSS" title="Expand the editor" data-i18n="[title]Expand the editor"></i>
                                </h4>
                                <div id="CustomCSS-textAreaBlock" class="flex-container flexnowrap alignitemscenter">
                                    <textarea id="customCSS" class="text_pole margin0 margin-r5 textarea_compact monospace" rows="8"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div name="UserSettingsThirdColumn" id="power-user-options-block" class="flex-container wide100p">
                        <div id="power-user-option-checkboxes">

                            <div name="ChatMessageHandlingToggles">
                                <h4 data-i18n="Chat/Message Handling">Chat/Message Handling</h4>
                                <div class="flex-container">
                                    <div class="alignitemscenter flex-container flexFlowColumn flexBasis48p flexGrow flexShrink gap0">
                                        <small>
                                            <span data-i18n="# Messages to Load"># Msg. to Load</span>

                                            <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]The number of chat history messages to load before pagination." title="The number of chat history messages to load before pagination."></div>
                                        </small>
                                        <input class="neo-range-slider" type="range" id="chat_truncation" name="chat_truncation" min="0" max="1000" step="5">
                                        <input class="neo-range-input" type="number" min="0" max="1000" step="5" data-for="chat_truncation" id="chat_truncation_counter">
                                        <small data-i18n="(0 = All)">(0 = All)</small>
                                    </div>

                                    <div class="alignitemscenter flex-container flexFlowColumn flexBasis48p flexGrow flexShrink gap0">
                                        <small>
                                            <span data-i18n="Streaming FPS">Streaming FPS</span>
                                            <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]Update speed of streamed text." title="Update speed of streamed text."></div>
                                        </small>
                                        <input class="neo-range-slider" type="range" id="streaming_fps" name="streaming_fps" min="5" max="100" step="5">
                                        <input class="neo-range-input" type="number" min="5" max="100" step="5" data-for="streaming_fps" id="streaming_fps_counter">
                                    </div>
                                </div>
                                <div data-newbie-hidden id="examples-behavior-block">
                                    <label data-i18n="Example Messages Behavior">
                                        <small>Example Messages Behavior:</small>
                                    </label>
                                    <select id="example_messages_behavior">
                                        <option value="normal" data-i18n="Gradual push-out">Gradual push-out</option>
                                        <option value="keep" data-i18n="Always include examples">Always include examples</option>
                                        <option value="strip" data-i18n="Never include examples">Never include examples</option>
                                    </select>
                                </div>
                                <div data-newbie-hidden class="flex-container alignitemscenter">
                                    <small data-i18n="Send on Enter">
                                        Enter to Send:
                                    </small>
                                    <select id="send_on_enter" class="widthNatural flex1 margin0">
                                        <option value="-1" data-i18n="Disabled">Disabled</option>
                                        <option value="0" data-i18n="Automatic (PC)">Automatic (PC)</option>
                                        <option value="1" data-i18n="Enabled">Enabled</option>
                                    </select>
                                </div>
                                <label data-newbie-hidden class="checkbox_label" for="continue_on_send">
                                    <input id="continue_on_send" type="checkbox" />
                                    <small data-i18n="Press Send to continue">
                                        "Send" to Continue
                                    </small>
                                </label>
                                <label class="checkbox_label" for="quick_continue" title="Show a button in the input area to ask the AI to continue (extend) its last message." data-i18n="[title]Show a button in the input area to ask the AI to continue (extend) its last message">
                                    <input id="quick_continue" type="checkbox" />
                                    <small data-i18n="Quick 'Continue' button">
                                        Quick "Continue" button
                                    </small>
                                </label>
                                <label class="checkbox_label" for="quick_impersonate" title="Show a button in the input area to ask the AI to impersonate your character for a single message." data-i18n="[title]Show a button in the input area to ask the AI to impersonate your character for a single message">
                                    <input id="quick_impersonate" type="checkbox" />
                                    <small data-i18n="Quick 'Impersonate' button">
                                        Quick "Impersonate" button
                                    </small>
                                </label>
                                <div class="checkbox-container flex-container">
                                    <label data-newbie-hidden class="checkbox_label" for="swipes-checkbox" title="Show arrow buttons on the last in-chat message to generate alternative AI responses. Both PC and mobile." data-i18n="[title]Show arrow buttons on the last in-chat message to generate alternative AI responses. Both PC and mobile">
                                        <input id="swipes-checkbox" type="checkbox" />
                                        <small data-i18n="Swipes">Swipes</small><i class="fa-solid fa-desktop"></i><i class="fa-solid fa-mobile-screen-button"></i>
                                    </label>
                                    <label data-newbie-hidden class="checkbox_label" for="gestures-checkbox" title="Allow using swiping gestures on the last in-chat message to trigger swipe generation. Mobile only, no effect on PC." , data-i18n="[title]Allow using swiping gestures on the last in-chat message to trigger swipe generation. Mobile only, no effect on PC">
                                        <input id="gestures-checkbox" type="checkbox" />
                                        <small data-i18n="Gestures">Gestures</small>
                                        <i class="fa-solid fa-mobile-screen-button"></i>
                                    </label>
                                </div>
                                <label class="checkbox_label" for="auto-load-chat-checkbox">
                                    <input id="auto-load-chat-checkbox" type="checkbox" />
                                    <small data-i18n="Auto-load Last Chat">Auto-load Last Chat</small>
                                </label>
                                <label data-newbie-hidden for="auto_scroll_chat_to_bottom" class="checkbox_label">
                                    <input id="auto_scroll_chat_to_bottom" type="checkbox" />
                                    <small data-i18n="Auto-scroll Chat">Auto-scroll Chat</small>
                                </label>
                                <label data-newbie-hidden class="checkbox_label" for="auto_save_msg_edits" title="Save edits to messages without confirmation as you type." data-i18n="[title]Save edits to messages without confirmation as you type">
                                    <input id="auto_save_msg_edits" type="checkbox" />
                                    <small data-i18n="Auto-save Message Edits">Auto-save Message Edits</small>
                                </label>
                                <label data-newbie-hidden class="checkbox_label" for="confirm_message_delete">
                                    <input id="confirm_message_delete" type="checkbox" />
                                    <small data-i18n="Confirm message deletion">Confirm message deletion</small>
                                </label>
                                <label class="checkbox_label" for="auto_fix_generated_markdown">
                                    <input id="auto_fix_generated_markdown" type="checkbox" />
                                    <small data-i18n="Auto-fix Markdown">Auto-fix Markdown</small>
                                </label>
                                <label data-newbie-hidden class="checkbox_label" for="render_formulas" title="Render LaTeX and AsciiMath equation notation in chat messages. Powered by KaTeX." data-i18n="[title]Render LaTeX and AsciiMath equation notation in chat messages. Powered by KaTeX">
                                    <input id="render_formulas" type="checkbox" />
                                    <small data-i18n="Render Formulas">Render Formulas</small>
                                    <a href="https://docs.sillytavern.app/usage/core-concepts/uicustomization/#formulas-rendering" class="notes-link" target="_blank">
                                        <small class="fa-solid fa-circle-question note-link-small"></small>
                                    </a>
                                </label>
                                <label class="checkbox_label" for="forbid_external_media" title="Disallow embedded media from other domains in chat messages." data-i18n="[title]Disallow embedded media from other domains in chat messages">
                                    <input id="forbid_external_media" type="checkbox" />
                                    <small data-i18n="Forbid External Media">Forbid External Media</small>
                                </label>
                                <label data-newbie-hidden class="checkbox_label" for="allow_name2_display">
                                    <input id="allow_name2_display" type="checkbox" />
                                    <small data-i18n="Allow {{char}}: in bot messages">Show {{char}}: in responses</small>
                                </label>
                                <label data-newbie-hidden class="checkbox_label" for="allow_name1_display">
                                    <input id="allow_name1_display" type="checkbox" />
                                    <small data-i18n="Allow {{user}}: in bot messages">Show {{user}}: in responses</small>
                                </label>
                                <label class="checkbox_label" for="encode_tags" title="Skip encoding &lt; and &gt; characters in message text, allowing a subset of HTML markup as well as Markdown." data-i18n="[title]Skip encoding  and  characters in message text, allowing a subset of HTML markup as well as Markdown">
                                    <input id="encode_tags" type="checkbox" />
                                    <small data-i18n="Show tags in responses">Show &lt;tags&gt; in responses</small>
                                </label>
                                <label data-newbie-hidden class="checkbox_label" for="disable_group_trimming" title="Allow AI messages in groups to contain lines spoken by other group members." data-i18n="[title]Allow AI messages in groups to contain lines spoken by other group members">
                                    <input id="disable_group_trimming" type="checkbox" />
                                    <small data-i18n="Relax message trim in Groups">Relax message trim in Groups</small>
                                </label>
                                <label data-newbie-hidden class="checkbox_label" for="console_log_prompts">
                                    <input id="console_log_prompts" type="checkbox" />
                                    <small data-i18n="Log prompts to console">Log prompts to console</small>
                                </label>
                                <label data-newbie-hidden class="checkbox_label" for="request_token_probabilities" title="Requests logprobs from the API for the Token Probabilities feature." data-i18n="[title]Requests logprobs from the API for the Token Probabilities feature">
                                    <input id="request_token_probabilities" type="checkbox" />
                                    <small data-i18n="Request token probabilities">Request token probabilities</small>
                                </label>
                                <label data-newbie-hidden class="checkbox_label" for="show_group_chat_queue" title="In group chat, highlight the character(s) that are currently queued to generate responses and the order in which they will respond." data-i18n="[title]In group chat, highlight the character(s) that are currently queued to generate responses and the order in which they will respond.">
                                    <input id="show_group_chat_queue" type="checkbox" />
                                    <small data-i18n="Show group chat queue">Show group chat queue</small>
                                </label>
                                <div data-newbie-hidden class="inline-drawer wide100p flexFlowColumn">
                                    <div class="inline-drawer-toggle inline-drawer-header userSettingsInnerExpandable" title="Automatically reject and re-generate AI message based on configurable criteria." data-i18n="[title]Automatically reject and re-generate AI message based on configurable criteria">
                                        <b><span data-i18n="Auto-swipe">Auto-swipe</span></b>
                                        <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                                    </div>
                                    <div class="inline-drawer-content">
                                        <label class="checkbox_label" for="auto_swipe" title="Enable the auto-swipe function. Settings in this section only have an effect when auto-swipe is enabled." data-i18n="[title]Enable the auto-swipe function. Settings in this section only have an effect when auto-swipe is enabled">
                                            <input id="auto_swipe" type="checkbox" />
                                            <small data-i18n="Enabled">Enabled</small>
                                        </label>
                                        <small data-i18n="Minimum generated message length">Minimum generated message length</small>
                                        <input id="auto_swipe_minimum_length" name="auto_swipe_minimum_length" type="number" min="0" step="1" value="0" class="text_pole" title="If the generated message is shorter than this, trigger an auto-swipe." data-i18n="[title]If the generated message is shorter than this, trigger an auto-swipe">
                                        <small data-i18n="Blacklisted words">Blacklisted words</small>
                                        <div class="auto_swipe">
                                            <textarea id="auto_swipe_blacklist" name="auto_swipe_blacklist" data-i18n="[placeholder]words you dont want generated separated by comma ','" placeholder="words you don't want generated separated by comma ','" class="text_pole textarea_compact" maxlength="5000" value="" autocomplete="off" rows="3"></textarea>
                                            <small data-i18n="Blacklisted word count to swipe">Blacklisted word count to swipe</small>
                                            <input id="auto_swipe_blacklist_threshold" name="auto_swipe_blacklist_threshold" type="number" min="0" step="1" value="1" class="text_pole" title="Minimum number of blacklisted words detected to trigger an auto-swipe." data-i18n="[title]Minimum number of blacklisted words detected to trigger an auto-swipe">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div name="AutoCompleteToggle">
                                <h4 data-i18n="AutoComplete Settings">AutoComplete Settings</h4>
                                <label data-newbie-hidden class="checkbox_label" for="stscript_autocomplete_autoHide">
                                    <input id="stscript_autocomplete_autoHide" type="checkbox" />
                                    <small data-i18n="Automatically hide details">
                                        Automatically hide details
                                    </small>
                                </label>
                                <div class="flex-container">
                                    <div class="flex1" title="Determines how entries are found for autocomplete." data-i18n="[title]Determines how entries are found for autocomplete.">
                                        <label for="stscript_matching" data-i18n="Autocomplete Matching"><small>Matching</small></label>
                                        <select id="stscript_matching">
                                            <option data-i18n="Starts with" value="strict">Starts with</option>
                                            <option data-i18n="Includes" value="includes">Includes</option>
                                            <option data-i18n="Fuzzy" value="fuzzy">Fuzzy</option>
                                        </select>
                                    </div>
                                    <div class="flex1" title="Sets the style of the autocomplete." data-i18n="[title]Sets the style of the autocomplete.">
                                        <label for="stscript_autocomplete_style" data-i18n="Autocomplete Style"><small>Style</small></label>
                                        <div class="flex-container flexFlowRow alignItemsBaseline">
                                            <select id="stscript_autocomplete_style">
                                                <option data-i18n="Follow Theme" value="theme">Follow Theme</option>
                                                <option data-i18n="Dark" value="dark">Dark</option>
                                                <option data-i18n="Light" value="light">Light</option>
                                            </select>
                                            <!-- <div class="menu_button fa-solid fa-pen-to-square" title="Customize colors"></div> -->
                                        </div>
                                    </div>
                                </div>
                                <div title="Determines which keys select an item from the AutoComplete suggestions">
                                    <label data-i18n="Keyboard">
                                        <small>Keyboard:</small>
                                    </label>
                                    <select id="stscript_autocomplete_select">
                                        <option value="3" data-i18n="Select with Tab or Enter">Select with Tab or Enter</option>
                                        <option value="1" data-i18n="Select with Tab">Select with Tab</option>
                                        <option value="2" data-i18n="Select with Enter">Select with Enter</option>
                                    </select>
                                </div>
                                <div class="flex-container flexFlowColumn gap0" title="Sets the font size of the autocomplete." data-i18n="[title]Sets the font size of the autocomplete.">
                                    <label for="stscript_autocomplete_font_scale"><small>Font Scale</small></label>
                                    <input class="neo-range-slider" type="range" id="stscript_autocomplete_font_scale" min="0.5" max="2" step="0.01">
                                    <input class="neo-range-input" type="number" min="0.5" max="2" step="0.01" data-for="stscript_autocomplete_font_scale" id="stscript_autocomplete_font_scale_counter">
                                </div>
                                <div title="Sets the width of the autocomplete." data-i18n="[title]Sets the width of the autocomplete.">
                                    <label for="stscript_autocomplete_width" data-i18n="Autocomplete Width"><small>Width</small></label>
                                    <div class="doubleRangeContainer">
                                        <div class="doubleRangeInputContainer">
                                            <input type="range" id="stscript_autocomplete_width_left" min="0" max="2" step="1">
                                            <datalist id="stscript_autocomplete_width_left_values">
                                                <option value="0" label="input" title="chat input box" data-i18n="[title]chat input box"></option>
                                                <option value="1" label="chat" title="entire chat width" data-i18n="[title]entire chat width"></option>
                                                <option value="2" label="full" title="full window width" data-i18n="[title]full window width"></option>
                                            </datalist>
                                        </div>
                                        <div class="doubleRangeInputContainer">
                                            <input type="range" id="stscript_autocomplete_width_right" min="0" max="2" step="1">
                                            <datalist id="stscript_autocomplete_width_right_values">
                                                <option value="0" label="input" title="chat input box" data-i18n="[title]chat input box"></option>
                                                <option value="1" label="chat" title="entire chat width" data-i18n="[title]entire chat width"></option>
                                                <option value="2" label="full" title="full window width" data-i18n="[title]full window width"></option>
                                            </datalist>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div name="STscriptToggles">
                                <h4 data-i18n="STscript Settings">STscript Settings</h4>
                                <div title="Sets default flags for the STscript parser." data-i18n="[title]Sets default flags for the STscript parser.">
                                    <label><small data-i18n="Parser Flags">Parser Flags</small></label>
                                    <label class="checkbox_label" title="Switch to stricter escaping, allowing all delimiting characters to be escaped with a backslash, and backslashes to be escaped as well." data-i18n="[title]Switch to stricter escaping, allowing all delimiting characters to be escaped with a backslash, and backslashes to be escaped as well.">
                                        <input id="stscript_parser_flag_strict_escaping" type="checkbox" />
                                        <span data-i18n="STRICT_ESCAPING"><small>STRICT_ESCAPING</small></span>
                                        <a href="https://docs.sillytavern.app/usage/st-script/#strict-escaping" target="_blank" class="notes-link">
                                            <span class="fa-solid fa-circle-question note-link-span"></span>
                                        </a>
                                    </label>
                                    <label class="checkbox_label" title="Prevents {{getvar::}} {{getglobalvar::}} macros from having literal macro-like values auto-evaluated.&NewLine;e.g. &quot;{{newline}}&quot; remains as literal string &quot;{{newline}}&quot;&NewLine;&NewLine;(This is done by internally replacing {{getvar::}} {{getglobalvar::}} macros with scoped variables.)" data-i18n="[title]stscript_parser_flag_replace_getvar_label">
                                        <input id="stscript_parser_flag_replace_getvar" type="checkbox" />
                                        <span data-i18n="REPLACE_GETVAR"><small>REPLACE_GETVAR</small></span>
                                        <a href="https://docs.sillytavern.app/usage/st-script/#replace-variable-macros" target="_blank" class="notes-link">
                                            <span class="fa-solid fa-circle-question note-link-span"></span>
                                        </a>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="logo_block" class="drawer">
            <div id="site_logo" class="drawer-toggle drawer-header" title="Change Background Image" data-i18n="[title]Change Background Image">
                <div class="drawer-icon fa-solid fa-panorama  closedIcon"></div>
            </div>
            <div id="Backgrounds" class="drawer-content closedDrawer">
                <div class="flex-container">
                    <div class="flex-container wide100p">
                        <input id="bg-filter" data-i18n="[placeholder]Filter" placeholder="Filter" class="text_pole flex1" type="search" />
                        <div id="auto_background" class="menu_button menu_button_icon" data-i18n="[title]Automatically select a background based on the chat context" title="Automatically select a background based on the chat context.">
                            <i class="fa-solid fa-wand-magic"></i>
                            <span data-i18n="Auto-select">Auto-select</span>
                        </div>
                    </div>
                    <h3 data-i18n="System Backgrounds" class="wide100p textAlignCenter">
                        System Backgrounds
                    </h3>
                    <div id="bg_menu_content" class="bg_list">
                        <form id="form_bg_download" class="bg_example no-border no-shadow" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                            <label class="input-file">
                                <input type="file" id="add_bg_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
                                <div class="bg_example no-border no-shadow add_bg_but" style="background-image: url('/img/addbg3.png');"></div>
                            </label>
                        </form>
                    </div>
                    <h3 data-i18n="Chat Backgrounds" class="wide100p textAlignCenter">
                        Chat Backgrounds
                    </h3>
                    <div id="bg_chat_hint" class="wide100p textAlignCenter">
                        <span data-i18n="bg_chat_hint_1">Chat backgrounds generated with the</span> <code><i class="fa-solid fa-paintbrush"></i>&nbsp;Image Generation</code> <span data-i18n="bg_chat_hint_2">extension will appear here.</span>
                    </div>
                    <div id="bg_custom_content" class="bg_list">
                    </div>
                </div>
            </div>
        </div>
        <div id="extensions-settings-button" class="drawer">
            <div class="drawer-toggle">
                <div class="drawer-icon fa-solid fa-cubes  closedIcon" title="Extensions" data-i18n="[title]Extensions"></div>
            </div>
            <div id="rm_extensions_block" class="drawer-content closedDrawer">
                <div class="extensions_block flex-container">
                    <div class="alignitemscenter flex-container wide100p">
                        <h3 class="margin0 flex1" data-i18n="Extensions">
                            Extensions
                        </h3>
                        <label for="extensions_notify_updates" class="checkbox_label flexNoGap">
                            <input id="extensions_notify_updates" type="checkbox">
                            <span data-i18n="Notify on extension updates">Notify on extension updates</span>
                        </label>
                        <div id="extensions_details" class="menu_button_icon menu_button">
                            <i class="fa-solid fa-cubes"></i>
                            <span data-i18n="Manage extensions">Manage extensions</span>
                        </div>
                        <div id="third_party_extension_button" title="Import Extension From Git Repo" data-i18n="[title]Import Extension From Git Repo" class="menu_button menu_button_icon">
                            <i class="fa-solid fa-cloud-arrow-down"></i>
                            <span data-i18n="Install extension">Install extension</span>
                        </div>
                    </div>
                    <div id="extensions_settings" class="flex1 wide50p">
                        <div id="assets_container" class="extension_container"></div>
                        <div id="expressions_container" class="extension_container"></div>
                        <div id="sd_container" class="extension_container"></div>
                        <div id="tts_container" class="extension_container"></div>
                        <div id="rvc_container" class="extension_container"></div>
                        <div id="stt_container" class="extension_container"></div>
                        <div id="audio_container" class="extension_container"></div>
                        <div id="silence_container" class="extension_container"></div>
                        <div id="objective_container" class="extension_container"></div>
                        <div id="blip_container" class="extension_container"></div>
                        <div id="live2d_container" class="extension_container"></div>
                        <div id="vrm_container" class="extension_container"></div>
                        <div id="timelines_container" class="extension_container"></div>
                    </div>
                    <div id="extensions_settings2" class="flex1 wide50p">
                        <div id="websearch_container" class="extension_container"></div>
                        <div id="emulatorjs_container" class="extension_container"></div>
                        <div id="qr_container" class="extension_container"></div>
                        <div id="translation_container" class="extension_container"></div>
                        <div id="caption_container" class="extension_container"></div>
                        <div id="idle_container" class="extension_container"></div>
                        <div id="summarize_container" class="extension_container"></div>
                        <div id="hypebot_container" class="extension_container"></div>
                        <div id="regex_container" class="extension_container"></div>
                        <div id="vectors_container" class="extension_container"></div>
                        <div id="randomizer_container" class="extension_container"></div>
                        <div id="chromadb_container" class="extension_container"></div>
                    </div>
                    <hr class="wide100p margin0">
                    <div class="alignitemscenter flex-container justifyCenter wide100p" style="justify-content: space-between;">
                        <h4 class="margin0"><span data-i18n="Extras API:">Extras API:</span>
                            <a target="_blank" href="https://github.com/SillyTavern/SillyTavern-Extras">
                                SillyTavern-Extras
                            </a>
                        </h4>
                        <div class="flex-container">
                            <div id="extensions_status" data-i18n="Not connected...">Not connected...</div>
                            <label for="extensions_autoconnect" class="checkbox_label flexNoGap">
                                <input id="extensions_autoconnect" type="checkbox">
                                <span data-i18n="Auto-connect">Auto-connect</span>
                            </label>
                        </div>
                    </div>
                    <div class="alignitemsflexstart flex-container wide100p">
                        <input id="extensions_url" type="text" class="flex1 heightFitContent text_pole widthNatural" maxlength="250" data-i18n="[placeholder]Extras API URL" placeholder="Extras API URL">
                        <input id="extensions_api_key" type="text" class="flex1 heightFitContent text_pole widthNatural" maxlength="250" data-i18n="[placeholder]Extras API key (optional)" placeholder="Extras API key (optional)">
                        <div class="extensions_url_block">
                            <div id="extensions_connect" class="menu_button" data-i18n="Connect">Connect</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="persona-management-button" class="drawer">
            <div class="drawer-toggle">
                <div class="drawer-icon fa-solid fa-face-smile closedIcon" title="Persona Management" data-i18n="[title]Persona Management"></div>
            </div>
            <div class="drawer-content closedDrawer">
                <div class="flex-container wide100p alignitemscenter spaceBetween flexNoGap">
                    <div class="flex-container alignItemsBaseline wide100p">
                        <div class="flex1 flex-container alignItemsBaseline">
                            <h3 class="margin0" data-i18n="Persona Management">Persona Management</h3>
                            <a href="https://docs.sillytavern.app/usage/core-concepts/personas/" target="_blank" data-i18n="How do I use this?">
                                <span class="fa-solid fa-circle-question note-link-span"></span>
                            </a>
                        </div>
                        <div class="flex-container">
                            <div class="menu_button menu_button_icon user_stats_button" data-i18n="[title]Click for stats!" title="Click for stats!">
                                <i class="fa-solid fa-ranking-star"></i>
                                <span data-i18n="Usage Stats">Usage Stats</span>
                            </div>
                            <div id="personas_backup" class="menu_button menu_button_icon" data-i18n="[title]Backup your personas to a file" title="Backup your personas to a file">
                                <i class="fa-solid fa-file-export"></i>
                                <span data-i18n="Backup">Backup</span>
                            </div>
                            <div id="personas_restore" class="menu_button menu_button_icon" data-i18n="[title]Restore your personas from a file" title="Restore your personas from a file">
                                <i class="fa-solid fa-file-import"></i>
                                <span data-i18n="Restore">Restore</span>
                            </div>
                            <input id="personas_restore_input" type="file" accept=".json" hidden>
                        </div>
                    </div>
                    <div id="persona-management-block" class="flex-container wide100p flexGap10">
                        <div class="flex1 overflowHidden wide100p">
                            <div class="flex-container marginBot10 alignitemscenter">
                                <div id="create_dummy_persona" class="menu_button menu_button_icon" title="Create a dummy persona" data-i18n="[title]Create a dummy persona">
                                    <i class="fa-solid fa-person-circle-question fa-fw"></i>
                                    <div data-i18n="Create">Create</div>
                                </div>
                                <input id="persona_search_bar" class="text_pole width100p flex1 margin0" type="search" data-i18n="[placeholder]Search..." placeholder="Search..." maxlength="100">
                                <select id="persona_sort_order" class="margin0">
                                    <option value="search" data-i18n="Search" hidden>Search</option>
                                    <option value="asc">A-Z</option>
                                    <option value="desc">Z-A</option>
                                </select>
                                <div id="persona_pagination_container" class="flex1"></div>
                                <i id="persona_grid_toggle" class="fa-solid fa-table-cells-large menu_button" data-i18n="[title]Toggle grid view" title="Toggle grid view"></i>
                            </div>
                            <div id="user_avatar_block" data-i18n="[no_desc_text]No persona description" no_desc_text="[No description]">
                                <div class="avatar_upload">+</div>
                            </div>
                            <form id="form_upload_avatar" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                                <input type="file" id="avatar_upload_file" accept="image/*" name="avatar">
                                <input type="hidden" id="avatar_upload_overwrite" name="overwrite_name" value="">
                            </form>
                        </div>
                        <div class="flex1">
                            <h4 data-i18n="Name">Name</h4>
                            <div class="change_name">
                                <input id="your_name" name="your_name" data-i18n="[placeholder]Enter your name" placeholder="Enter your name" class="text_pole wide100p" maxlength="100" value="" autocomplete="off">
                                <div id="your_name_button" class="menu_button fa-solid fa-check" title="Click to set a new User Name" data-i18n="[title]Click to set a new User Name">
                                </div>
                                <div id="lock_user_name" class="menu_button fa-solid fa-unlock" title="Click to lock your selected persona to the current chat. Click again to remove the lock." data-i18n="[title]Click to lock your selected persona to the current chat. Click again to remove the lock.">
                                </div>
                                <div id="sync_name_button" class="menu_button fa-solid fa-sync" title="Click to set user name for all messages" data-i18n="[title]Click to set user name for all messages">
                                </div>
                            </div>
                            <div>
                                <h4 data-i18n="Persona Description">Persona Description</h4>
                                <textarea id="persona_description" name="persona_description" data-i18n="[placeholder]Example: [{{user}} is a 28-year-old Romanian cat girl.]" placeholder="Example:&#10;[{{user}} is a 28-year-old Romanian cat girl.]" class="text_pole textarea_compact" maxlength="50000" value="" autocomplete="off" rows="8"></textarea>
                                <div class="extension_token_counter">
                                    <span data-i18n="Tokens persona description">Tokens</span>: <span id="persona_description_token_count">0</span>
                                </div>
                                <div data-newbie-hidden>
                                    <label for="persona_description_position" data-i18n="Position:">Position:</label>
                                    <select id="persona_description_position">
                                        <option value="0" data-i18n="In Story String / Prompt Manager">In Story String / Prompt Manager</option>
                                        <option value="2" data-i18n="Top of Author's Note">Top of Author's Note</option>
                                        <option value="3" data-i18n="Bottom of Author's Note">Bottom of Author's Note</option>
                                        <option value="4" data-i18n="In-chat @ Depth">In-chat @ Depth</option>
                                    </select>
                                    <div id="persona_depth_position_settings" class="flex-container">
                                        <div class="flex1">
                                            <label for="persona_depth_value" data-i18n="Depth:">Depth:</label>
                                            <input id="persona_depth_value" class="text_pole" type="number" min="0" max="999" step="1">
                                        </div>
                                        <div class="flex1">
                                            <label for="persona_depth_role" data-i18n="Role:">Role:</label>
                                            <select id="persona_depth_role" class="text_pole">
                                                <option data-i18n="System" value="0">System</option>
                                                <option data-i18n="User" value="1">User</option>
                                                <option data-i18n="Assistant" value="2">Assistant</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="range-block">
                                <label for="persona_show_notifications" class="checkbox_label">
                                    <input id="persona_show_notifications" type="checkbox" />
                                    <span data-i18n="Show notifications on switching personas">
                                        Show notifications on switching personas
                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="rightNavHolder" class="drawer">
            <div id="unimportantYes" class="drawer-toggle drawer-header">
                <div id="rightNavDrawerIcon" class="drawer-icon fa-solid fa-address-card  closedIcon" title="Character Management" data-i18n="[title]Character Management">
                </div>
            </div>
            <nav id="right-nav-panel" class="drawer-content closedDrawer fillRight">
                <div id="right-nav-panelheader" class="fa-solid fa-grip drag-grabber">
                </div>
                <div id="CharListButtonAndHotSwaps" class="flex-container flexnowrap">
                    <div class="flexFlowColumn flex-container">
                        <div id="rm_button_panel_pin_div" class="alignitemsflexstart" title="Locked = Character Management panel will stay open" data-i18n="[title]Locked = Character Management panel will stay open">
                            <input type="checkbox" id="rm_button_panel_pin">
                            <label for="rm_button_panel_pin">
                                <div class="fa-solid unchecked fa-unlock right_menu_button" alt=""></div>
                                <div class="fa-solid checked fa-lock right_menu_button" alt=""></div>
                            </label>
                        </div>
                        <div class="right_menu_button fa-solid fa-list-ul" id="rm_button_characters" title="Select/Create Characters" data-i18n="[title]Select/Create Characters"></div>
                    </div>
                    <div id="HotSwapWrapper" class="alignitemscenter flex-container margin0auto wide100p">
                        <div class="hotswap avatars_inline flex-container scroll-reset-container expander" data-i18n="[no_favs]Favorite characters to add them to HotSwaps" no_favs="Favorite characters to add them to HotSwaps"></div>
                    </div>
                </div>
                <hr>
                <!-- this div structure must be preserved until group peeking can adjust -->
                <div id="rm_PinAndTabs">
                    <div id="right-nav-panel-tabs" class="">
                        <div id="rm_button_selected_ch">
                            <h2 class="interactable"></h2>
                        </div>
                        <div id="result_info" class="flex-container" style="display: none;">
                            <div id="result_info_text" title="Token counts may be inaccurate and provided just for reference." data-i18n="[title]Token counts may be inaccurate and provided just for reference.">
                                <div>
                                    <strong id="result_info_total_tokens" title="Total tokens" data-i18n="[title]Total tokens"><span data-i18n="Calculating...">Calculating...</span></strong>&nbsp;<span data-i18n="Tokens">Tokens</span>
                                </div>
                                <div>
                                    <small title="Permanent tokens" data-i18n="[title]Permanent tokens">
                                        (<span id="result_info_permanent_tokens"></span>&nbsp;<span data-i18n="Permanent">Permanent</span>)
                                    </small>
                                </div>
                            </div>
                            <a id="chartokenwarning" class="right_menu_button fa-solid fa-triangle-exclamation" href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#character-tokens" target="_blank" title="About Token 'Limits'" data-i18n="[title]About Token 'Limits'"></a>
                            <i title="Click for stats!" data-i18n="[title]Click for stats!" class="fa-solid fa-ranking-star right_menu_button rm_stats_button"></i>
                            <i title="Toggle character info panel" data-i18n="[title]Toggle character info panel" id="hideCharPanelAvatarButton" class="fa-solid fa-eye right_menu_button"></i>
                        </div>
                    </div>
                </div>
                <!-- end group peeking cope structure-->
                <div name="Solo Char Create/Edit Panel" id="rm_ch_create_block" class="right_menu flex-container flexFlowColumn" style="display: none;">
                    <form id="form_create" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                        <div id="avatar-and-name-block">
                            <div id="name_div">
                                <input id="character_name_pole" name="ch_name" class="text_pole" data-i18n="[placeholder]Name this character" placeholder="Name this character" maxlength="100" value="" autocomplete="off">
                                <div class="extension_token_counter">
                                    <span data-i18n="extension_token_counter">Tokens:</span> <span data-token-counter="character_name_pole" data-token-permanent="true">counting...</span>
                                </div>
                            </div>
                            <div class="flex-container flexFlowColumn expander flexNoGap">
                                <div id="avatar_div" class="avatar_div alignitemsflexstart justifySpaceBetween flexnowrap">
                                    <label id="avatar_div_div" class="add_avatar avatar" for="add_avatar_button" title="Click to select a new avatar for this character" data-i18n="[title]Click to select a new avatar for this character">
                                        <img id="avatar_load_preview" src="img/ai4.png" alt="avatar">
                                        <input hidden type="file" id="add_avatar_button" name="avatar" accept="image/*">
                                    </label>
                                    <div class="flex-container" id="avatar_controls">
                                        <div class="form_create_bottom_buttons_block">
                                            <div id="rm_button_back" class="menu_button fa-solid fa-left-long "></div>
                                            <!-- <div id="renameCharButton" class="menu_button fa-solid fa-user-pen" title="Rename Character"></div> -->
                                            <div id="favorite_button" class="menu_button fa-solid fa-star" title="Add to Favorites" data-i18n="[title]Add to Favorites"></div>
                                            <input type="hidden" id="fav_checkbox" name="fav" />
                                            <div id="advanced_div" class="menu_button fa-solid fa-book " title="Advanced Definitions" data-i18n="[title]Advanced Definition"></div>
                                            <div id="world_button" class="menu_button fa-solid fa-globe" title="Character Lore&#10;&#10;Click to load&#10;Shift-click to open 'Link to World Info' popup" data-i18n="[title]world_button_title"></div>
                                            <div class="chat_lorebook_button menu_button fa-solid fa-passport" title="Chat Lore" data-i18n="[title]Chat Lore"></div>
                                            <div id="export_button" class="menu_button fa-solid fa-file-export " title="Export and Download" data-i18n="[title]Export and Download"></div>
                                            <!-- <div id="set_chat_scenario" class="menu_button fa-solid fa-scroll" title="Set a chat scenario override"></div> -->
                                            <!-- <div id="set_character_world" class="menu_button fa-solid fa-globe" title="Set a character World Info / Lorebook"></div> -->
                                            <div id="dupe_button" class="menu_button fa-solid fa-clone " title="Duplicate Character" data-i18n="[title]Duplicate Character"></div>
                                            <label for="create_button" id="create_button_label" class="menu_button fa-solid fa-user-check" title="Create Character" data-i18n="[title]Create Character">
                                                <input type="submit" id="create_button" name="create_button">
                                            </label>
                                            <div id="delete_button" class="menu_button fa-solid fa-skull " title="Delete Character" data-i18n="[title]Delete Character"></div>
                                        </div>
                                        <label class="flex1 height100p" for="char-management-dropdown">
                                            <select id="char-management-dropdown" class="text_pole">
                                                <option value="default" disabled selected data-i18n="More...">More...</option>
                                                <option id="set_character_world" data-i18n="Link to World Info">
                                                    Link to World Info
                                                </option>
                                                <option id="import_character_info" data-i18n="Import Card Lore">
                                                    Import Card Lore
                                                </option>
                                                <option id="set_chat_scenario" data-i18n="Scenario Override">
                                                    Scenario Override
                                                </option>
                                                <option id="convert_to_persona" data-i18n="Convert to Persona">
                                                    Convert to Persona
                                                </option>
                                                <option id="renameCharButton" data-i18n="Rename">
                                                    Rename
                                                </option>
                                                <option id="character_source" data-i18n="Link to Source">
                                                    Link to Source
                                                </option>
                                                <option id="replace_update" data-i18n="Replace / Update">
                                                    Replace / Update
                                                </option>
                                                <option id="import_tags" data-i18n="Import Tags">
                                                    Import Tags
                                                </option>
                                                <!--<option id="dupe_button">
                                                        Duplicate
                                                    </option>
                                                    <option id="export_button">
                                                        Export
                                                    </option>
                                                    <option id="delete_button">
                                                        Delete
                                                    </option>-->
                                            </select>
                                        </label>
                                    </div>
                                </div>
                                <div id="tags_div">
                                    <div class="tag_controls">
                                        <input id="tagInput" class="text_pole textarea_compact tag_input wide100p margin0" data-i18n="[placeholder]Search / Create Tags" placeholder="Search / Create tags" maxlength="50" />
                                        <div class="tags_view menu_button fa-solid fa-tags" title="View all tags" data-i18n="[title]View all tags"></div>
                                    </div>
                                    <div id="tagList" class="tags"></div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div id="spoiler_free_desc" class="flex-container flexFlowColumn flex1 flexNoGap">
                            <div id="creators_notes_div" class="title_restorable">
                                <span data-i18n="Creator's Notes">Creator's Notes</span>
                                <div id="spoiler_free_desc_button" class="margin0 menu_button fa-solid fa-eye" title="Show / Hide Description and First Message" data-i18n="[title]Show / Hide Description and First Message"></div>
                            </div>
                            <div id="creator_notes_spoiler" class="flex1"></div>
                            <!-- A button to show / hide description_div and description_textarea and first_message_div and firstmessage_textarea-->
                        </div>
                        <div id="descriptionWrapper" class="flex-container flexFlowColumn flex1">
                            <hr>
                            <div id="description_div" class="title_restorable">
                                <div class="flex-container alignitemscenter">
                                    <span data-i18n="Character Description">Description</span>
                                    <i class="editor_maximize fa-solid fa-maximize right_menu_button" data-for="description_textarea" title="Expand the editor" data-i18n="[title]Expand the editor"></i>
                                    <a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#character-description" class="notes-link" target="_blank">
                                        <span class="fa-solid fa-circle-question note-link-span"></span>
                                    </a>
                                </div>
                                <div id="character_open_media_overrides" class="menu_button menu_button_icon open_media_overrides" title="Click to allow/forbid the use of external media for this character." data-i18n="[title]Click to allow/forbid the use of external media for this character.">
                                    <i id="character_media_allowed_icon" class="fa-solid fa-fw fa-link"></i>
                                    <i id="character_media_forbidden_icon" class="fa-solid fa-fw fa-link-slash"></i>
                                    <span data-i18n="Ext. Media">
                                        Ext. Media
                                    </span>
                                </div>
                            </div>
                            <textarea id="description_textarea" data-i18n="[placeholder]Describe your character's physical and mental traits here." placeholder="Describe your character's physical and mental traits here." name="description" placeholder=""></textarea>
                            <div class="extension_token_counter">
                                <span data-i18n="extension_token_counter">Tokens:</span> <span data-token-counter="description_textarea" data-token-permanent="true">counting...</span>
                            </div>
                        </div>
                        <div id="firstMessageWrapper" class="flex-container flexFlowColumn flex1">
                            <div id="first_message_div" class="title_restorable">
                                <div class="flex-container alignitemscenter flex1">
                                    <span data-i18n="First message">First message</span>
                                    <i class="editor_maximize fa-solid fa-maximize right_menu_button" data-for="firstmessage_textarea" title="Expand the editor" data-i18n="[title]Expand the editor"></i>
                                    <a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#first-message" class="notes-link" target="_blank">
                                        <span class="fa-solid fa-circle-question note-link-span"></span>
                                    </a>
                                </div>
                                <div class="menu_button menu_button_icon open_alternate_greetings margin0" title="Click to set additional greeting messages" data-i18n="[title]Click to set additional greeting messages">
                                    <span data-i18n="Alt. Greetings">
                                        Alt. Greetings
                                    </span>
                                </div>
                            </div>
                            <textarea id="firstmessage_textarea" data-i18n="[placeholder]This will be the first message from the character that starts every chat." placeholder="This will be the first message from the character that starts every chat." name="first_mes" placeholder=""></textarea>
                            <div class="extension_token_counter">
                                <span data-i18n="extension_token_counter">Tokens:</span> <span data-token-counter="firstmessage_textarea">counting...</span>
                            </div>
                        </div>
                        <!-- these divs are invisible and used for server communication purposes -->
                        <div id="hidden-divs">
                            <input id="character_json_data" name="json_data" type="hidden">
                            <input id="avatar_url_pole" name="avatar_url" type="hidden">
                            <input id="selected_chat_pole" name="chat" type="hidden">
                            <input id="create_date_pole" name="create_date" type="hidden">
                            <input id="last_mes_pole" name="last_mes" type="hidden">
                            <input id="character_world" name="world" type="hidden">
                        </div>
                        <!-- now back to normal divs for display purposes-->
                    </form>
                </div>
                <div name="Group Chat Edit Panel" id="rm_group_chats_block" class="right_menu flex-container flexNoGap">
                    <div class="inline-drawer wide100p flexFlowColumn">
                        <div id="groupControlsToggle" class="inline-drawer-toggle inline-drawer-header">
                            <span>
                                <span data-i18n="Group Controls">Group Controls</span>
                                <a href="https://docs.sillytavern.app/usage/core-concepts/groupchats/" class="notes-link" target="_blank">
                                    <span class="fa-solid fa-circle-question note-link-span"></span>
                                </a>
                            </span>
                            <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                        </div>
                        <div class="inline-drawer-content">
                            <div id="group-metadata-controls" class="marginTopBot5">
                                <div class="flex-container wide100p">
                                    <input id="rm_group_chat_name" class="text_pole flex1" type="text" name="chat_name" data-i18n="[placeholder]Chat Name (Optional)" placeholder="Chat Name (Optional)" maxlength="200" />
                                    <div class="chat_lorebook_button menu_button fa-solid fa-passport" title="Chat Lore" data-i18n="[title]Chat Lore"></div>
                                </div>
                                <div id="group_tags_div" class="wide100p">
                                    <div class="tag_controls">
                                        <input id="groupTagInput" class="text_pole textarea_compact tag_input flex1 margin0" data-i18n="[placeholder]Search / Create Tags" placeholder="Search / Create tags" maxlength="50" />
                                        <div class="tags_view menu_button fa-solid fa-tags margin0" title="View all tags" data-i18n="[title]View all tags"></div>
                                    </div>
                                    <div id="groupTagList" class="tags paddingTopBot5"></div>
                                </div>
                                <div id="rm_group_top_bar" class="flex-container alignitemscenter spaceBetween width100p fontsize80p">
                                    <div>
                                        <label class="add_avatar avatar flex-container justifyCenter" for="group_avatar_button" title="Click to select a new avatar for this group" data-i18n="[title]Click to select a new avatar for this group">
                                            <div id="group_avatar_preview">
                                                <div class="avatar">
                                                    <img src="img/ai4.png" alt="avatar">
                                                </div>
                                            </div>
                                            <input hidden type="file" id="group_avatar_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
                                        </label>
                                    </div>
                                    <div name="GroupStragegyAndOrder" id="rm_group_buttons" class="flex-container paddingLeftRight5 flex2">
                                        <div class="flex1 flexGap5">
                                            <label for="rm_group_activation_strategy" class="flexnowrap width100p whitespacenowrap">
                                                <span data-i18n="Group reply strategy">Group reply strategy</span>
                                            </label>
                                            <select id="rm_group_activation_strategy">
                                                <option value="0" data-i18n="Natural order">Natural order</option>
                                                <option value="1" data-i18n="List order">List order</option>
                                            </select>
                                        </div>
                                        <div class="flex1 flexGap5">
                                            <label for="rm_group_generation_mode" class="flexnowrap width100p whitespacenowrap">
                                                <span data-i18n="Group generation handling mode">Group generation handling mode</span>
                                            </label>
                                            <select id="rm_group_generation_mode">
                                                <option value="0" data-i18n="Swap character cards">Swap character cards</option>
                                                <option value="1" data-i18n="Join character cards (exclude muted)">Join character cards (exclude muted)</option>
                                                <option value="2" data-i18n="Join character cards (include muted)">Join character cards (include muted)</option>
                                            </select>
                                        </div>
                                        <div class="flex1 flexGap5" title="Inserted before each part of the joined fields." data-i18n="[title]Inserted before each part of the joined fields.">
                                            <label for="rm_group_generation_mode_join_prefix" class="flexnowrap width100p whitespacenowrap">
                                                <span data-i18n="Join Prefix">Join Prefix</span>
                                                <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]When 'Join character cards' is selected, all respective fields of the characters are being joined together.This means that in the story string for example all character descriptions will be joined to one big text.If you want those fields to be separated, you can define a prefix or suffix here.This value supports normal macros and will also replace {{char}} with the relevant char's name and &lt;FIELDNAME&gt; with the name of the part (e.g.: description, personality, scenario, etc.)" title="When 'Join character cards' is selected, all respective fields of the characters are being joined together.&#13;This means that in the story string for example all character descriptions will be joined to one big text.&#13;If you want those fields to be separated, you can define a prefix or suffix here.&#13;&#13;This value supports normal macros and will also replace {{char}} with the relevant char's name and &lt;FIELDNAME&gt; with the name of the part (e.g.: description, personality, scenario, etc.)">
                                                </div>
                                            </label>
                                            <textarea id="rm_group_generation_mode_join_prefix" class="text_pole wide100p textarea_compact autoSetHeight" maxlength="2000" placeholder="&mdash;" rows="1"></textarea>
                                        </div>
                                        <div class="flex1 flexGap5" title="Inserted after each part of the joined fields." data-i18n="[title]Inserted after each part of the joined fields.">
                                            <label for="rm_group_generation_mode_join_suffix" class="flexnowrap width100p whitespacenowrap">
                                                <span data-i18n="Join Suffix">Join Suffix</span>
                                                <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]When 'Join character cards' is selected, all respective fields of the characters are being joined together.This means that in the story string for example all character descriptions will be joined to one big text.If you want those fields to be separated, you can define a prefix or suffix here.This value supports normal macros and will also replace {{char}} with the relevant char's name and &lt;FIELDNAME&gt; with the name of the part (e.g.: description, personality, scenario, etc.)" title="When 'Join character cards' is selected, all respective fields of the characters are being joined together.&#13;This means that in the story string for example all character descriptions will be joined to one big text.&#13;If you want those fields to be separated, you can define a prefix or suffix here.&#13;&#13;This value supports normal macros and will also replace {{char}} with the relevant char's name and &lt;FIELDNAME&gt; with the name of the part (e.g.: description, personality, scenario, etc.)">
                                                </div>
                                            </label>
                                            <textarea id="rm_group_generation_mode_join_suffix" class="text_pole wide100p textarea_compact autoSetHeight" maxlength="2000" placeholder="&mdash;" rows="1"></textarea>
                                        </div>
                                    </div>
                                    <div id="GroupFavDelOkBack" class="flex-container flexGap5 spaceEvenly flex1">
                                        <div id="rm_button_back_from_group" class="heightFitContent margin0 menu_button fa-solid fa-left-long"></div>
                                        <div id="rm_group_scenario" class="heightFitContent margin0 menu_button fa-solid fa-scroll" title="Set a group chat scenario" data-i18n="[title]Set a group chat scenario"></div>
                                        <div id="group_favorite_button" class="heightFitContent margin0 menu_button fa-solid fa-star" title="Add to Favorites" data-i18n="[title]Add to Favorites"></div>
                                        <input id="rm_group_fav" type="hidden" />
                                        <div id="group_open_media_overrides" class="heightFitContent margin0 menu_button menu_button_icon open_media_overrides" title="Click to allow/forbid the use of external media for this group." data-i18n="[title]Click to allow/forbid the use of external media for this group.">
                                            <i id="group_media_allowed_icon" class="fa-solid fa-fw fa-link"></i>
                                            <i id="group_media_forbidden_icon" class="fa-solid fa-fw fa-link-slash"></i>
                                        </div>
                                        <div id="rm_group_submit" class="heightFitContent margin0 menu_button fa-solid fa-check" title="Create" data-i18n="[title]Create"></div>
                                        <div id="rm_group_restore_avatar" class="heightFitContent margin0 menu_button fa-solid fa-images" title="Restore collage avatar" data-i18n="[title]Restore collage avatar"></div>
                                        <div id="rm_group_delete" class="heightFitContent margin0 menu_button fa-solid fa-trash-can" title="Delete" data-i18n="[title]Delete"></div>
                                        <div class="flex1">
                                            <label class="checkbox_label whitespacenowrap">
                                                <input id="rm_group_allow_self_responses" type="checkbox" />
                                                <span data-i18n="Allow self responses">Allow self responses</span>
                                            </label>
                                            <label id="rm_group_automode_label" class="checkbox_label whitespacenowrap">
                                                <input id="rm_group_automode" type="checkbox" />
                                                <span data-i18n="Auto Mode">Auto Mode</span>
                                                <input id="rm_group_automode_delay" class="text_pole textarea_compact widthUnset" type="number" min="1" max="999" step="1" value="5" title="Auto Mode delay" data-i18n="[title]Auto Mode delay" />
                                            </label>
                                            <label id="rm_group_hidemutedsprites_label" class="checkbox_label whitespacenowrap">
                                                <input id="rm_group_hidemutedsprites" type="checkbox" />
                                                <span data-i18n="Hide Muted Member Sprites">Hide Muted Member Sprites</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="inline-drawer wide100p flexFlowColumn">
                        <div id="groupCurrentMemberListToggle" class="inline-drawer-toggle inline-drawer-header">
                            <span data-i18n="Current Members">Current Members </span><i id="groupCurrentMemberPopoutButton" class="fa-solid fa-window-restore menu_button"></i>
                            <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                        </div>
                        <div class="inline-drawer-content">
                            <div id="currentGroupMembers" name="Current Group Members" class="flex-container flexFlowColumn overflowYAuto flex1">
                                <div id="rm_group_members_pagination" class="rm_group_members_pagination group_pagination"></div>
                                <div id="rm_group_members" class="rm_group_members overflowYAuto flex-container"></div>
                            </div>
                        </div>
                    </div>
                    <div class="inline-drawer wide100p flexFlowColumn">
                        <div id="groupAddMemberListToggle" class="inline-drawer-toggle inline-drawer-header">
                            <span data-i18n="Add Members">Add Members</span>
                            <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                        </div>
                        <div class="inline-drawer-content">
                            <div name="Unadded Char List" class="flex-container flexFlowColumn overflowYAuto flex1">
                                <div id="rm_group_add_members_header">
                                    <input id="rm_group_filter" class="text_pole margin0" type="search" data-i18n="[placeholder]Search..." placeholder="Search..." maxlength="200" />
                                </div>
                                <div class="rm_tag_controls">
                                    <div class="tags rm_tag_filter"></div>
                                </div>
                                <div id="rm_group_add_members_pagination" class="group_pagination"></div>
                                <div id="rm_group_add_members" class="overflowYAuto flex-container"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="rm_character_import" class="right_menu" style="display: none;">
                    <form id="form_import" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                        <input multiple type="file" id="character_import_file" accept=".json, image/png, .yaml, .yml, .charx" name="avatar">
                        <input id="character_import_file_type" name="file_type" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
                    </form>
                    <input type="file" id="character_replace_file" accept=".json, image/png, .yaml, .yml, .charx" name="replace_avatar" hidden>
                </div>
                <div name="Character List Panel" id="rm_characters_block" class="right_menu">
                    <div id="charListFixedTop">
                        <form id="form_character_search_form" action="javascript:void(null);">
                            <div id="rm_button_create" title="Create New Character" data-i18n="[title]Create New Character" class="menu_button fa-solid fa-user-plus "></div>
                            <div id="character_import_button" title="Import Character from File" data-i18n="[title]Import Character from File" class="menu_button fa-solid fa-file-import faSmallFontSquareFix"></div>
                            <div id="external_import_button" title="Import content from external URL" data-i18n="[title]Import content from external URL" class="menu_button fa-solid fa-cloud-arrow-down faSmallFontSquareFix"></div>
                            <div id="rm_button_group_chats" title="Create New Chat Group" data-i18n="[title]Create New Chat Group" class="menu_button fa-solid fa-users-gear "></div>
                            <input id="character_search_bar" class="text_pole width100p" type="search" data-i18n="[placeholder]Search..." placeholder="Search..." maxlength="100" />
                            <select id="character_sort_order" title="Characters sorting order" data-i18n="[title]Characters sorting order">
                                <option data-field="search" data-order="desc" data-i18n="Search" hidden>Search</option>
                                <option data-field="name" data-order="asc" data-i18n="A-Z">A-Z</option>
                                <option data-field="name" data-order="desc" data-i18n="Z-A">Z-A</option>
                                <option data-field="create_date" data-order="desc" data-i18n="Newest">Newest</option>
                                <option data-field="create_date" data-order="asc" data-i18n="Oldest">Oldest</option>
                                <option data-field="fav" data-order="desc" data-rule="boolean" data-i18n="Favorites">Favorites</option>
                                <option data-field="date_last_chat" data-order="desc" data-i18n="Recent">Recent</option>
                                <option data-field="chat_size" data-order="desc" data-i18n="Most chats">Most chats</option>
                                <option data-field="chat_size" data-order="asc" data-i18n="Least chats">Least chats</option>
                                <option data-field="data_size" data-order="desc" data-i18n="Most tokens">Most tokens</option>
                                <option data-field="data_size" data-order="asc" data-i18n="Least tokens">Least tokens</option>
                                <option data-field="name" data-order="random" data-i18n="Random">Random</option>
                            </select>
                        </form>
                        <div class="rm_tag_controls">
                            <div class="tags rm_tag_filter"></div>
                            <div class="tags rm_tag_bogus_drilldown"></div>
                        </div>
                        <hr>
                    </div>

                    <div id="rm_print_characters_pagination">
                        <i id="charListGridToggle" class="fa-solid fa-table-cells-large menu_button" title="Toggle character grid view" data-i18n="[title]Toggle character grid view"></i>
                        <i id="bulkEditButton" class="fa-solid fa-edit menu_button bulkEditButton" title="Bulk edit characters&#13;&#13;Click to toggle characters&#13;Shift + Click to select/deselect a range of characters&#13;Right-click for actions" data-i18n="[title]Bulk_edit_characters"></i>
                        <div id="bulkSelectedCount" class="bulkEditOptionElement paginationjs-nav"></div>
                        <i id="bulkSelectAllButton" class="fa-solid fa-check-double menu_button bulkEditOptionElement bulkSelectAllButton" title="Bulk select all characters" data-i18n="[title]Bulk select all characters" style="display: none;"></i>
                        <i id="bulkDeleteButton" class="fa-solid fa-trash menu_button bulkEditOptionElement bulkDeleteButton" title="Bulk delete characters" data-i18n="[title]Bulk delete characters" style="display: none;"></i>
                    </div>
                    <div id="rm_print_characters_block" class="flexFlowColumn"></div>
                </div>
            </nav>
        </div>
    </div>
    <!-- various fullscreen popups -->
    <template id="popup_template" data-i18n="[popup-button-save]popup-button-save;[popup-button-yes]popup-button-yes;[popup-button-no]popup-button-no;[popup-button-cancel]popup-button-cancel;[popup-button-import]popup-button-import;[popup-button-crop]popup-button-crop" popup-button-save="Save" popup-button-yes="Yes" popup-button-no="No" popup-button-cancel="Cancel" popup-button-import="Import" popup-button-crop="Crop"> <!-- localization data holder for popups -->
        <dialog class="popup">
            <div class="popup-body">
                <div class="popup-content">
                    <h3 class="popup-header">text</h3>
                </div>
                <div class="popup-crop-wrap">
                    <img class="popup-crop-image" src="">
                </div>
                <textarea class="popup-input text_pole result-control auto-select" rows="1" data-result="1" data-result-event="submit"></textarea>
                <div class="popup-inputs"></div>
                <div class="popup-controls">
                    <div class="popup-button-ok menu_button result-control" data-result="1" data-i18n="Delete">Delete</div>
                    <div class="popup-button-cancel menu_button result-control" data-result="0" data-i18n="Cancel">Cancel</div>
                </div>
            </div>
            <div class="popup-button-close right_menu_button fa-solid fa-circle-xmark" data-result="0" title="Close popup" data-i18n="[title]Close popup"></div>
        </dialog>
    </template>
    <div id="shadow_popup">
        <div id="dialogue_popup">
            <div id="dialogue_popup_holder">
                <div id="dialogue_popup_text">
                    <h3 class="margin0">text</h3>
                </div>
                <textarea id="dialogue_popup_input" class="text_pole" rows="1"></textarea>
                <div id="dialogue_popup_controls">
                    <div id="dialogue_popup_ok" class="menu_button" data-i18n="Delete" data-result="1">Delete</div>
                    <div id="dialogue_popup_cancel" class="menu_button" data-i18n="Cancel" data-result="0">Cancel</div>
                </div>
            </div>
        </div>
    </div>
    <div id="character_popup" class="flex-container flexFlowColumn flexNoGap">
        <div id="character_popup_text">
            <h3 id="character_popup-button-h3" class="margin0"></h3> <span data-i18n="Advanced Defininitions">- Advanced
                Definitions</span>
        </div>
        <hr class="margin-bot-10px">
        <div id="character_cross" class="fa-solid fa-circle-xmark"></div>
        <div class="inline-drawer">
            <div class="inline-drawer-toggle inline-drawer-header">
                <h4>
                    <span data-i18n="Prompt Overrides">Prompt Overrides</span>
                    <small data-i18n="(For Chat Completion and Instruct Mode)">(For Chat Completion and Instruct Mode)</small>
                </h4>
                <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
            </div>
            <div class="inline-drawer-content">
                <small data-i18n="Insert {{original}} into either box to include the respective default prompt from system settings.">Insert {{original}} into either box to include the respective default prompt from system settings.</small>
                <div>
                    <h4 data-i18n="Main Prompt">Main Prompt</h4>
                    <textarea id="system_prompt_textarea" name="system_prompt" data-i18n="[placeholder]Any contents here will replace the default Main Prompt used for this character. (v2 spec: system_prompt)" placeholder="Any contents here will replace the default Main Prompt used for this character.&#10;(v2 spec: system_prompt)" form="form_create" class="text_pole" autocomplete="off" rows="3" maxlength="50000"></textarea>
                    <div class="extension_token_counter">
                        <span data-i18n="extension_token_counter">Tokens:</span> <span data-token-counter="system_prompt_textarea">counting...</span>
                    </div>
                </div>
                <div>
                    <h4 data-i18n="Post-History Instructions">Post-History Instructions</h4>
                    <textarea id="post_history_instructions_textarea" name="post_history_instructions" data-i18n="[placeholder]Any contents here will replace the default Post-History Instructions used for this character. (v2 spec: post_history_instructions)" placeholder="Any contents here will replace the default Post-History Instructions used for this character.&#10;(v2 spec: post_history_instructions)" form="form_create" class="text_pole" autocomplete="off" rows="3" maxlength="50000"></textarea>
                    <div class="extension_token_counter">
                        <span data-i18n="extension_token_counter">Tokens:</span> <span data-token-counter="post_history_instructions_textarea">counting...</span>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <div class="inline-drawer">
            <div class="inline-drawer-toggle inline-drawer-header">
                <h4 data-i18n="Creator's Metadata (Not sent with the AI prompt)"><!-- This data-i18n attribute on the left is kept for backward compatibility, use the ones below when translating -->
                    <span data-i18n="Creator's Metadata">Creator's Metadata</span>
                    <small data-i18n="(Not sent with the AI Prompt)">(Not sent with the AI Prompt)</small>
                </h4>
                <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
            </div>
            <div class="inline-drawer-content">
                <small data-i18n="Everything here is optional">Everything here is optional</small>
                <div class="flex-container flexnowrap">
                    <div class="flex1">
                        <h4 data-i18n="Created by">Created by</h4>
                        <textarea id="creator_textarea" name="creator" data-i18n="[placeholder](Botmaker's name / Contact Info)" placeholder="(Botmaker's name / Contact info)" form="form_create" class="text_pole" autocomplete="off" rows="2" maxlength="5000"></textarea>
                    </div>
                    <div class="flex1">
                        <h4 data-i18n="Character Version">Character Version</h4>
                        <textarea id="character_version_textarea" name="character_version" data-i18n="[placeholder](If you want to track character versions)" placeholder="(If you want to track character versions)" form="form_create" class="text_pole" autocomplete="off" rows="2" maxlength="500"></textarea>
                    </div>
                </div>
                <div class="flex-container flexnowrap">
                    <div class="flex1">
                        <h4 class="flex-box" data-i18n="Creator's Notes">Creator's Notes<i class="editor_maximize fa-solid fa-maximize" data-for="creator_notes_textarea" title="Expand the editor" data-i18n="[title]Expand the editor"></i></h4>
                        <textarea id="creator_notes_textarea" name="creator_notes" data-i18n="[placeholder](Describe the bot, give use tips, or list the chat models it has been tested on. This will be displayed in the character list.)" placeholder="(Describe the bot, give use tips, or list the chat models it has been tested on. This will be displayed in the character list.)" form="form_create" class="text_pole" autocomplete="off" rows="4" maxlength="20000"></textarea>
                    </div>
                    <div class="flex1">
                        <h4 data-i18n="Tags to Embed">Tags to Embed</h4>
                        <textarea id="tags_textarea" name="tags" data-i18n="[placeholder](Write a comma-separated list of tags)" placeholder="(Write a comma-separated list of tags)" form="form_create" class="text_pole" autocomplete="off" rows="4" maxlength="5000"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <div id="personality_div">
            <h4>
                <span data-i18n="Personality summary">Personality summary</span>
                <a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#personality-summary" class="notes-link" target="_blank"><span class="fa-solid fa-circle-question note-link-span"></span></a>
            </h4>
            <textarea id="personality_textarea" name="personality" data-i18n="[placeholder](A brief description of the personality)" placeholder="(A brief description of the personality)" form="form_create" class="text_pole" autocomplete="off" rows="4" maxlength="50000"></textarea>
            <div class="extension_token_counter">
                <span data-i18n="extension_token_counter">Tokens:</span> <span data-token-counter="personality_textarea" data-token-permanent="true">counting...</span>
            </div>
        </div>
        <div id="scenario_div">
            <h4>
                <span data-i18n="Scenario">Scenario</span>
                <a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#scenario" class="notes-link" target="_blank">
                    <span class="fa-solid fa-circle-question note-link-span"></span>
                </a>
            </h4>
            <textarea id="scenario_pole" name="scenario" data-i18n="[placeholder](Circumstances and context of the interaction)" placeholder="(Circumstances and context of the interaction)" class="text_pole" maxlength="50000" value="" autocomplete="off" form="form_create" rows="4"></textarea>
            <div class="extension_token_counter">
                <span data-i18n="extension_token_counter">Tokens:</span> <span data-token-counter="scenario_pole" data-token-permanent="true">counting...</span>
            </div>
        </div>
        <div id="depth_prompt_div" class="flex-container">
            <div class="flex1">
                <h4>
                    <span data-i18n="Character's Note">
                        Character's Note
                    </span>
                </h4>
                <textarea id="depth_prompt_prompt" name="depth_prompt_prompt" class="text_pole" rows="5" maxlength="50000" autocomplete="off" form="form_create" data-i18n="[placeholder](Text to be inserted in-chat @ designated depth and role)" placeholder="(Text to be inserted in-chat @ designated depth and role)"></textarea>
            </div>
            <div>
                <h4>
                    <span data-i18n="@ Depth">
                        @ Depth
                    </span>
                </h4>
                <input id="depth_prompt_depth" name="depth_prompt_depth" class="text_pole textarea_compact m-t-0" type="number" min="0" max="999" value="4" form="form_create" />
                <h4>
                    <span data-i18n="Role">
                        Role
                    </span>
                </h4>
                <select id="depth_prompt_role" name="depth_prompt_role" form="form_create" class="text_pole textarea_compact m-t-0">
                    <option value="system" data-i18n="System">System</option>
                    <option value="user" data-i18n="User">User</option>
                    <option value="assistant" data-i18n="Assistant">Assistant</option>
                </select>
                <div class="extension_token_counter">
                    <span data-i18n="extension_token_counter">Tokens:</span> <span data-token-counter="depth_prompt_prompt" data-token-permanent="true">counting...</span>
                </div>
            </div>
        </div>
        <div id="talkativeness_div">
            <h4><span data-i18n="Talkativeness">Talkativeness</span></h4>
            <h5 data-i18n="How often the character speaks in group chats!"><!-- This data-i18n attribute on the left is kept for backward compatibility, use the ones below when translating -->
                <span data-i18n="How often the character speaks in">How often the character speaks in</span>&nbsp;<span class="warning" data-i18n="group chats!">group chats!</span>
            </h5>
            <input id="talkativeness_slider" name="talkativeness" type="range" min="0" max="1" step="0.05" value="0.5" form="form_create">
            <div class="slider_hint">
                <span data-i18n="Shy">Shy</span>
                <span data-i18n="Normal">Normal</span>
                <span data-i18n="Chatty">Chatty</span>
            </div>
        </div>
        <hr>
        <div id="mes_example_div" class="flex-container flexFlowColumn">
            <div>
                <h4><span data-i18n="Examples of dialogue">Examples of dialogue</span></h4>
                <h5 data-i18n="Important to set the character's writing style.">Important to set the character's writing style. <a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#examples-of-dialogue" class="notes-link" target="_blank"><span class="fa-solid fa-circle-question note-link-span"></span></a></h5>
            </div>
            <textarea id="mes_example_textarea" class="flexGrow" name="mes_example" data-i18n="[placeholder](Examples of chat dialog. Begin each example with START on a new line.)" placeholder="(Examples of chat dialog. Begin each example with &lt;START&gt; on a new line.)" form="form_create" maxlength="50000" rows="6"></textarea>
            <div class="extension_token_counter">
                <span data-i18n="extension_token_counter">Tokens:</span> <span data-token-counter="mes_example_textarea">counting...</span>
            </div>
            <!-- PLACEHOLDER CODE FOR NEW EXAMPLE CHAT HANDLING
                <div name="exampleChatsBlockTemplate" class="flex-container flexFlowColumn">
                    <div class="flex-container alignitemscenter">
                        <textarea class="flexShrink flexGrow wideMinContent" rows="1" placeholder="Name for this example chat"></textarea>
                        <div class="fa-solid fa-plus menu_button" title="Add a new message to this example chat block"></div>
                    </div>
                    <div class="flex-container whitespacenowrap">
                        <div class="flex-container flexFlowColumn">
                            <select>
                                <option>{{user}}</option>
                                <option>{{char}}</option>
                                <option>Custom</option>
                            </select>
                            <textarea rows="1" placeholder="Custom Entity"></textarea>
                        </div>
                        <textarea class="flexShrink flexGrow wideMinContent" placeholder="Content of the example chat."></textarea>
                    </div>
                    <div class="flex-container whitespacenowrap">
                        <div class="flex-container flexFlowColumn">
                            <select>
                                <option>{{user}}</option>
                                <option>{{char}}</option>
                                <option>Custom</option>
                            </select>
                            <textarea rows="1" placeholder="Custom Entity"></textarea>
                        </div>
                        <textarea class="flexShrink flexGrow wideMinContent" placeholder="Content of the example chat."></textarea>
                    </div>
                </div>
            -->
        </div>
        <div id="character_popup_ok" class="menu_button" data-i18n="Save">Save</div>
    </div>
    <div id="shadow_select_chat_popup">
        <div id="select_chat_popup">
            <div name="selectChatPopupHeader" class="flex-container alignitemscenter justifySpaceBetween flexGap10">
                <div id="select_chat_import"> <!-- import chat popup header -->
                    <form id="form_import_chat" action="javascript:void(null);" method="post" enctype="multipart/form-data" style="display: none;">
                        <input type="file" id="chat_import_file" accept=".json, .jsonl" name="avatar">
                        <input id="chat_import_file_type" name="file_type" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
                        <input id="chat_import_avatar_url" name="avatar_url" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
                        <input id="chat_import_character_name" name="character_name" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
                    </form>
                </div>
                <div id="selectChatPopupHeaderText" class="TxtLrgBoldCenter">
                    <span id="ChatHistoryCharName"></span><span data-i18n="Chat History">Chat History</span>
                    <a href="https://docs.sillytavern.app/usage/core-concepts/chatfilemanagement/#chat-import" class="notes-link" target="_blank"><span class="fa-solid fa-circle-question note-link-span"></span></a>
                </div>
                <div id="newChatFromManageScreenButton" class="menu_button menu_button_icon">
                    <i class="fa-solid fa-plus"></i>
                    <span data-i18n="New Chat">New Chat</span>
                </div>
                <div id="chat_import_button" class="menu_button menu_button_icon">
                    <i class="fa-solid fa-file-import"></i>
                    <span data-i18n="Import Chat">Import Chat</span>
                </div>
                <input type="text" id="select_chat_search" class="text_pole flex1" data-i18n="[placeholder]Search..." placeholder="Search..." autocomplete="off">
                <div id="select_chat_cross" class="opacity50p hoverglow fa-solid fa-circle-xmark fontsize120p" alt="Close Past Chat Popup"></div>
            </div>
            <div id="select_chat_div"></div>
            <div id="load_select_chat_div">
                <div class="fa-solid fa-hourglass fa-spin"></div>
            </div>
        </div>
    </div>
    <div id="background_template" class="template_element">
        <div class="bg_example flex-container" bgfile="" class="bg_example_img" title="">
            <div title="Copy to system backgrounds" data-i18n="[title]Copy to system backgrounds" class="bg_button bg_example_copy fa-solid fa-file-arrow-up"></div>
            <div title="Rename background" data-i18n="[title]Rename background" class="bg_button bg_example_edit fa-solid fa-pencil"></div>
            <div title="Lock" data-i18n="[title]Lock" class="bg_button bg_example_lock fa-solid fa-lock"></div>
            <div title="Unlock" data-i18n="[title]Unlock" class="bg_button bg_example_unlock fa-solid fa-lock-open"></div>
            <div title="Delete background" data-i18n="[title]Delete background" class="bg_button bg_example_cross fa-solid fa-circle-xmark"></div>
            <div class="BGSampleTitle">
            </div>
        </div>
    </div>
    <!-- templates for JS to reuse when needed -->
    <div id="chat_world_template" class="template_element">
        <div class="chat_world range-block flexFlowColumn flex-container">
            <div class="range-block-title">
                <h4 data-i18n="Chat Lorebook"><!-- This data-i18n attribute is kept for backward compatibility, use the ones below when translating -->
                    <span data-i18n="Chat Lorebook for">Chat Lorebook for</span> <span class="chat_name"></span>
                </h4>
            </div>
            <div class="range-block-counter justifyLeft flex-container flexFlowColumn margin-bot-10px">
                <span data-i18n="chat_world_template_txt">
                    A selected World Info will be bound to this chat. When generating an AI reply,
                    it will be combined with the entries from global and character lorebooks.
                </span>
            </div>
            <div class="range-block-range wide100p">
                <select class="chat_world_info_selector wide100p">
                    <option value="">--- None ---</option>
                </select>
            </div>
        </div>
    </div>
    <div id="character_world_template" class="template_element">
        <div class="character_world range-block flexFlowColumn flex-container">
            <div class="range-block-title">
                <h3>
                    <span data-i18n="Select a World Info file for"> Select a World Info file for <span class="character_name"></span></span>:
                </h3>
            </div>
            <h4 data-i18n="Primary Lorebook">Primary Lorebook</h4>
            <div class="range-block-counter justifyLeft flex-container flexFlowColumn margin-bot-10px">
                <span data-i18n="A selected World Info will be bound to this character as its own Lorebook.">A selected World Info will be bound to this character as its own Lorebook.</span>
                <span data-i18n="When generating an AI reply, it will be combined with the entries from a global World Info selector.">When generating an AI reply, it will be combined with the entries from a global World Info selector.</span>
                <span data-i18n="Exporting a character would also export the selected Lorebook file embedded in the JSON data.">Exporting a character would also export the selected Lorebook file embedded in the JSON data.</span>
            </div>
            <div class="range-block-range wide100p">
                <select class="character_world_info_selector wide100p">
                    <option value="">--- None ---</option>
                </select>
            </div>
            <div class="range-block-title">
                <h4>
                    <span data-i18n="Additional Lorebooks">Additional Lorebooks</span>
                </h4>
            </div>
            <div class="range-block-counter justifyLeft flex-container flexFlowColumn margin-bot-10px">
                <span data-i18n="Associate one or more auxillary Lorebooks with this character.">Associate one or more auxillary Lorebooks with this character.</span><br>
                <span data-i18n="NOTE: These choices are optional and won't be preserved on character export!">NOTE: These choices are optional and won't be preserved on character export!</span>
            </div>
            <div class="range-block-range wide100p">
                <select class="character_extra_world_info_selector wide100p" multiple>
                    <option value="" data-i18n="-- World Info not found --">-- World Info not found --</option>
                </select>
            </div>
        </div>
    </div>
    <div id="past_chat_template" class="template_element">
        <div class="select_chat_block_wrapper flex-container">
            <div class="select_chat_block  wide100p flex-container" file_name="">
                <div id="select_chat_name_wrapper" class="flex-container alignitemscenter justifySpaceBetween wide100p">
                    <div>
                        <small class="select_chat_block_filename select_chat_block_filename_item"></small>
                        <div title="Rename chat file" class="renameChatButton hoverglow opacity50p fa-solid fa-pencil" data-i18n="[title]Rename chat file"></div>
                    </div>
                    <div class="flex-container gap10px">
                        <div class="select_chat_info flex-container">
                            <small class="chat_messages_date select_chat_block_filename_item"></small>
                            <small class="chat_file_size select_chat_block_filename_item"></small>
                            <small class="chat_messages_num select_chat_block_filename_item"></small>
                        </div>
                        <div class="flex-container gap10px">
                            <div title="Export JSONL chat file" data-format="jsonl" class="exportRawChatButton opacity50p hoverglow fa-solid fa-file-export" data-i18n="[title]Export JSONL chat file"></div>
                            <div title="Download chat as plain text document" data-format="txt" class="exportChatButton opacity50p hoverglow fa-solid fa-file-lines" data-i18n="[title]Download chat as plain text document"></div>
                            <div title="Delete chat file" file_name="" class="PastChat_cross opacity50p hoverglow fa-solid fa-skull" data-i18n="[title]Delete chat file"></div>
                        </div>
                    </div>
                </div>
                <div class="select_chat_block_mes"></div>
            </div>
        </div>
    </div>
    <div id="tag_view_template" class="template_element">
        <div class="tag_view_item">
            <div class="drag-handle" data-i18n="[title]Drag to reorder tag">☰</div>
            <div title="Tag as folder" class="tag_as_folder fa-solid fa-folder-open right_menu_button" data-i18n="[title]Use tag as folder">
                <span class="tag_folder_indicator"></span>
            </div>
            <div class="tag_view_color_picker" data-value="color"></div>
            <div class="tag_view_color_picker" data-value="color2"></div>
            <div class="tag_view_name" contenteditable="true"></div>
            <div class="tag_view_counter"><span class="tag_view_counter_value"></span>&nbsp;entries</div>
            <div title="Delete tag" class="tag_delete fa-solid fa-trash-can right_menu_button" data-i18n="[title]Delete tag"></div>
        </div>
    </div>
    <div id="entry_edit_template" class="template_element">
        <div class="world_entry">
            <form class="world_entry_form  wi-card-entry">
                <div class="inline-drawer wide100p">
                    <div class="inline-drawer-header gap5px padding0">
                        <span class="drag-handle">&#9776;</span>
                        <div class="gap5px world_entry_thin_controls wide100p alignitemscenter">
                            <div class="inline-drawer-toggle fa-fw fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                            <div class="fa-solid fa-toggle-on killSwitch" name="entryKillSwitch" title="Toggle entry's active state."></div>
                            <div class="flex-container alignitemscenter wide100p">

                                <div class="WIEntryTitleAndStatus flex-container flex1 alignitemscenter">

                                    <div class="flex-container flex1">
                                        <textarea class="text_pole" rows="1" name="comment" maxlength="5000" data-i18n="[placeholder]Entry Title/Memo" placeholder="Entry Title/Memo"></textarea>
                                    </div>
                                    <select data-i18n="[title]WI Entry Status:🔵 Constant🟢 Normal🔗 Vectorized❌ Disabled" title="WI Entry Status:&#13;🔵 Constant&#13;🟢 Normal&#13;🔗 Vectorized&#13;❌ Disabled" name="entryStateSelector" class="text_pole widthNatural margin0">
                                        <option value="constant" title="Constant" data-i18n="[title]WI_Entry_Status_Constant">🔵</option>
                                        <option value="normal" title="Normal" data-i18n="[title]WI_Entry_Status_Normal">🟢</option>
                                        <option value="vectorized" title="Vectorized" data-i18n="[title]WI_Entry_Status_Vectorized">🔗</option>
                                    </select>
                                </div>
                                <div class="WIEnteryHeaderControls flex-container">
                                    <div name="PositionBlock" class="world_entry_form_control world_entry_form_radios wi-enter-footer-text">
                                        <label for="position" class="WIEntryHeaderTitleMobile" data-i18n="Position:">Position:</label>
                                        <select name="position" class="text_pole widthNatural margin0" data-i18n="[title]T_Position" title="↑Char: Before Character Definitions&#13;↓Char: After Character Definitions&#13;↑EM: Before Example Messages&#13;↓EM: After Example Messages&#13;↑AN: Before Author's Note&#13;↓AN: After Author's Note&#13;@D ⚙️: at Depth (System)&#13;@D 👤: at Depth (User)&#13;@D 🤖: at Depth (Assistant)">
                                            <option value="0" data-role="" data-i18n="Before Char Defs">
                                                ↑Char
                                            </option>
                                            <option value="1" data-role="" data-i18n="After Char Defs">
                                                ↓Char
                                            </option>
                                            <option value="5" data-role="" data-i18n="Before EM">
                                                ↑EM
                                            </option>
                                            <option value="6" data-role="" data-i18n="After EM">
                                                ↓EM
                                            </option>
                                            <option value="2" data-role="" data-i18n="Before AN">
                                                ↑AN
                                            </option>
                                            <option value="3" data-role="" data-i18n="After AN">
                                                ↓AN
                                            </option>
                                            <option value="4" data-role="0" data-i18n="at Depth System">
                                                @D ⚙️
                                            </option>
                                            <option value="4" data-role="1" data-i18n="at Depth User">
                                                @D 👤
                                            </option>
                                            <option value="4" data-role="2" data-i18n="at Depth AI">
                                                @D 🤖
                                            </option>
                                        </select>
                                    </div>
                                    <div class="world_entry_form_control wi-enter-footer-text flex-container flexNoGap">
                                        <label for="depth" class="WIEntryHeaderTitleMobile" data-i18n="Depth:">Depth:</label>
                                        <input title="Depth" class="text_pole wideMax100px margin0" type="number" name="depth" data-i18n="[title]Depth" placeholder="" min="0" max="999" />
                                    </div>
                                    <div class="world_entry_form_control wi-enter-footer-text  flex-container flexNoGap">
                                        <label for="order" class="WIEntryHeaderTitleMobile" data-i18n="Order:">Order:</label>
                                        <input title="Order" data-i18n="[title]Order" class="text_pole wideMax100px margin0" type="number" name="order" placeholder="" min="0" max="999" />
                                    </div>
                                    <div class="world_entry_form_control wi-enter-footer-text flex-container flexNoGap probabilityContainer">
                                        <label for="order" class="WIEntryHeaderTitleMobile" data-i18n="Trigger %:">Trigger %:</label>
                                        <input title="Probability" data-i18n="[title]Probability" class="text_pole wideMax100px margin0" type="number" name="probability" placeholder="" min="0" max="100" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <i class="menu_button duplicate_entry_button fa-solid fa-paste" title="Duplicate world info entry" data-i18n="[title]Duplicate world info entry" type="submit" value=""></i>
                        <i class="menu_button delete_entry_button fa-solid fa-trash-can" title="Delete world info entry" data-i18n="[title]Delete world info entry" type="submit" value=""></i>
                    </div>
                    <div class="inline-drawer-content flex-container paddingBottom5px wide100p">
                        <div class="flex-container wide100p alignitemscenter">
                            <div name="keywordsAndLogicBlock" class="flex-container wide100p alignitemscenter">
                                <div class="world_entry_form_control flex1">
                                    <small class="displayNone">
                                        <span data-i18n="Comma separated (required)">
                                            Comma separated (required)
                                        </span>
                                    </small>
                                    <small class="textAlignCenter" data-i18n="Primary Keywords">Primary Keywords</small>
                                    <select class="keyprimaryselect keyselect select2_multi_sameline" name="key" data-i18n="[placeholder]Keywords or Regexes" placeholder="Keywords or Regexes" multiple="multiple"></select>
                                    <textarea class="text_pole keyprimarytextpole mobile" name="key" rows="1" data-i18n="[placeholder]Comma separated list" placeholder="Comma separated list" maxlength="2000" style="display: none;"></textarea>
                                    <button type="button" class="switch_input_type_icon" tabindex="-1" title="Switch to plaintext mode" data-i18n="[title]Switch to plaintext mode" data-icon-on="✨" data-icon-off="⌨️" data-tooltip-on="Switch to fancy mode" data-tooltip-off="Switch to plaintext mode">
                                        ⌨️
                                    </button>
                                </div>
                                <div class="world_entry_form_control">
                                    <small class="textAlignCenter" data-i18n="Logic">Logic</small>
                                    <select name="entryLogicType" class="text_pole widthFitContent margin0">
                                        <option value="0" data-i18n="AND ANY">AND ANY</option>
                                        <option value="3" data-i18n="AND ALL">AND ALL</option>
                                        <option value="1" data-i18n="NOT ALL">NOT ALL</option>
                                        <option value="2" data-i18n="NOT ANY">NOT ANY</option>
                                    </select>
                                </div>
                                <div class="world_entry_form_control keysecondary flex1">
                                    <small class="displayNone">
                                        <span data-i18n="(ignored if empty)">
                                            (ignored if empty)
                                        </span>
                                    </small>
                                    <small class="textAlignCenter" data-i18n="Optional Filter">Optional Filter</small>
                                    <select class="keysecondaryselect keyselect select2_multi_sameline" name="keysecondary" data-i18n="[placeholder]Keywords or Regexes (ignored if empty)" placeholder="Keywords or Regexes (ignored if empty)" multiple="multiple"></select>
                                    <textarea class="text_pole keysecondarytextpole mobile" name="keysecondary" rows="1" data-i18n="[placeholder]Comma separated list (ignored if empty)" placeholder="Comma separated list (ignored if empty)" maxlength="2000" style="display: none;"></textarea>
                                    <button type="button" class="switch_input_type_icon" tabindex="-1" title="Switch to plaintext mode" data-i18n="[title]Switch to plaintext mode" data-icon-on="✨" data-icon-off="⌨️" data-tooltip-on="Switch to fancy mode" data-tooltip-off="Switch to plaintext mode">
                                        ⌨️
                                    </button>
                                </div>
                            </div>
                            <div name="perEntryOverridesBlock" class="flex-container wide100p alignitemscenter">
                                <div class="world_entry_form_control flex1">
                                    <small class="textAlignCenter" data-i18n="Scan Depth">Scan Depth</small>
                                    <input class="text_pole margin0" name="scanDepth" type="number" placeholder="Use global setting" data-i18n="[placeholder]Use global setting" max="1000">
                                </div>
                                <div class="world_entry_form_control flex1">
                                    <small class="textAlignCenter" data-i18n="Case-Sensitive">Case-Sensitive</small>
                                    <select name="caseSensitive" class="text_pole widthNatural margin0">
                                        <option value="null" data-i18n="Use global setting">Use global setting</option>
                                        <option value="true" data-i18n="Yes">Yes</option>
                                        <option value="false" data-i18n="No">No</option>
                                    </select>
                                </div>
                                <div class="world_entry_form_control flex1">
                                    <small class="textAlignCenter" data-i18n="Match Whole Words">Match Whole Words</small>
                                    <select name="matchWholeWords" class="text_pole widthNatural margin0">
                                        <option value="null" data-i18n="Use global setting">Use global setting</option>
                                        <option value="true" data-i18n="Yes">Yes</option>
                                        <option value="false" data-i18n="No">No</option>
                                    </select>
                                </div>
                                <div class="world_entry_form_control flex1">
                                    <small class="textAlignCenter" data-i18n="Use Group Scoring">Use Group Scoring</small>
                                    <select name="useGroupScoring" class="text_pole widthNatural margin0">
                                        <option value="null" data-i18n="Use global setting">Use global setting</option>
                                        <option value="true" data-i18n="Yes">Yes</option>
                                        <option value="false" data-i18n="No">No</option>
                                    </select>
                                </div>
                                <div class="world_entry_form_control flex1" title="Can be used to automatically activate Quick Replies" data-i18n="[title]Can be used to automatically activate Quick Replies">
                                    <small class="textAlignCenter" data-i18n="Automation ID">Automation ID</small>
                                    <input class="text_pole margin0" name="automationId" type="text" placeholder="( None )" data-i18n="[placeholder]( None )">
                                </div>
                            </div>
                            <div name="contentAndCharFilterBlock" class="world_entry_thin_controls flex2">
                                <div class="world_entry_form_control flex1">
                                    <label for="content ">
                                        <small>
                                            <span class="alignitemscenter flex-container flexnowrap wide100p justifySpaceBetween">
                                                <span data-i18n="Content" class="alignitemscenter flex-container flexNoGap">
                                                    Content
                                                </span>
                                                <span>
                                                    (<span data-i18n="extension_token_counter">Tokens:</span>&nbsp; <span class="world_entry_form_token_counter" data-first-run="true">counting...</span>)&nbsp;
                                                    <span class="world_entry_form_uid_value" data-first-run="true"></span>
                                                </span>
                                                <div>
                                                    <label class="checkbox flex-container alignitemscenter flexNoGap">
                                                        <input type="checkbox" name="exclude_recursion" />
                                                        <span data-i18n="Exclude from recursion">
                                                            Non-recursable (this entry will not be activated by another)
                                                        </span>
                                                    </label>
                                                    <label class="checkbox flex-container alignitemscenter flexNoGap">
                                                        <input type="checkbox" name="prevent_recursion" />
                                                        <span data-i18n="Prevent further recursion (this entry will not activate others)">
                                                            Prevent further recursion (this entry will not activate others)
                                                        </span>
                                                    </label>
                                                    <label class="checkbox flex-container alignitemscenter flexNoGap">
                                                        <input type="checkbox" name="delay_until_recursion" />
                                                        <span data-i18n="Delay until recursion (this entry can only be activated on recursive checking)">
                                                            Delay until recursion (this entry can only be activated on recursive checking)
                                                        </span>
                                                    </label>
                                                </div>
                                            </span>
                                        </small>
                                        <small class="displayNone">
                                            <span data-i18n="What this keyword should mean to the AI, sent verbatim">
                                                What this keyword should mean to the AI, sent verbatim
                                            </span>
                                        </small>
                                    </label>
                                    <textarea class="text_pole" name="content" rows="8" data-i18n="[placeholder]What this keyword should mean to the AI, sent verbatim" placeholder="What this keyword should mean to the AI, sent verbatim"></textarea>
                                </div>
                            </div>
                            <div class="world_entry_thin_controls commentContainer">
                            </div>
                        </div>
                        <div class="flex-container wide100p flexGap10">
                            <div class="flex4 flex-container flexFlowColumn flexNoGap">
                                <div class="flex-container justifySpaceBetween">
                                    <small for="group">
                                        <span data-i18n="Inclusion Group">Inclusion Group</span>
                                        <a href="https://docs.sillytavern.app/usage/core-concepts/worldinfo/#inclusion-group" class="notes-link" target="_blank" title="Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.&#13;Supports multiple comma-separated groups.&#13;&#13;Documentation: World Info - Inclusion Group" data-i18n="[title]Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.Documentation: World Info - Inclusion Group">
                                            <span class="fa-solid fa-circle-question note-link-span"></span>
                                        </a>
                                    </small>
                                    <label class="checkbox_label flexNoGap margin-r5" for="groupOverride">
                                        <input type="checkbox" name="groupOverride" />
                                        <span>
                                            <small title="Prioritize this entry: When checked, this entry is prioritized out of all selections.&#13;If multiple are prioritized, the one with the highest 'Order' is chosen.&#13;" data-i18n="[title]Prioritize this entry: When checked, this entry is prioritized out of all selections.If multiple are prioritized, the one with the highest 'Order' is chosen.">
                                                <span data-i18n="Prioritize">Prioritize</span>
                                                <div class="fa-solid fa-circle-info opacity50p"></div>
                                            </small>
                                        </span>
                                    </label>
                                </div>
                                <div class="range-block-range">
                                    <input type="text" class="text_pole margin0" name="group" rows="1" data-i18n="[placeholder]Only one entry with the same label will be activated" placeholder="Only one entry with the same label will be activated">
                                </div>
                            </div>
                            <div class="flex2 flex-container flexFlowColumn flexNoGap" data-i18n="[title]A relative likelihood of entry activation within the group" title="A relative likelihood of entry activation within the group">
                                <div class="flex-container justifySpaceBetween marginBot5">
                                    <small for="groupWeight" data-i18n="Group Weight">
                                        Group Weight
                                    </small>
                                </div>
                                <div class="range-block-range">
                                    <input type="number" class="text_pole margin0" name="groupWeight" rows="1" placeholder="100" min="1" max="999999">
                                </div>
                            </div>
                            <div class="flex2 flex-container flexFlowColumn flexNoGap" data-i18n="[title]Sticky entries will stay active for N messages after being triggered." title="Sticky entries will stay active for N messages after being triggered.">
                                <div class="flex-container justifySpaceBetween marginBot5">
                                    <small class="flex-container alignItemsBaseline" for="sticky" data-i18n="Sticky">
                                        <span data-i18n="Sticky">
                                            Sticky
                                        </span>
                                        <i class="fa-solid fa-comments fa-xs"></i>
                                    </small>
                                </div>
                                <div class="range-block-range">
                                    <input class="text_pole margin0" name="sticky" type="number" placeholder="Non-sticky" min="0" max="999999">
                                </div>
                            </div>
                            <div class="flex2 flex-container flexFlowColumn flexNoGap" data-i18n="[title]Entries with a cooldown can't be activated N messages after being triggered." title="Entries with a cooldown can't be activated N messages after being triggered.">
                                <div class="flex-container justifySpaceBetween marginBot5">
                                    <small class="flex-container alignItemsBaseline" for="cooldown" data-i18n="Cooldown">
                                        <span data-i18n="Cooldown">
                                            Cooldown
                                        </span>
                                        <i class="fa-solid fa-comments fa-xs"></i>
                                    </small>
                                </div>
                                <div class="range-block-range">
                                    <input class="text_pole margin0" name="cooldown" type="number" placeholder="No cooldown" min="0" max="999999">
                                </div>
                            </div>
                            <div class="flex2 flex-container flexFlowColumn flexNoGap" data-i18n="[title]Entries with a delay can't be activated until there are N messages present in the chat." title="Entries with a delay can't be activated until there are N messages present in the chat.">
                                <div class="flex-container justifySpaceBetween marginBot5">
                                    <small class="flex-container alignItemsBaseline" for="delay" data-i18n="Delay">
                                        <span data-i18n="Delay">
                                            Delay
                                        </span>
                                        <i class="fa-solid fa-comments fa-xs"></i>
                                    </small>
                                </div>
                                <div class="range-block-range">
                                    <input class="text_pole margin0" name="delay" type="number" placeholder="No delay" min="0" max="999999">
                                </div>
                            </div>
                        </div>
                        <div class="flex-container wide100p flexGap10">
                            <div class="flex4 flex-container flexFlowColumn flexNoGap">
                                <div class="flex-container justifySpaceBetween">
                                    <small for="characterFilter" data-i18n="Filter to Characters or Tags">
                                        Filter to Characters or Tags
                                    </small>
                                    <label class="checkbox_label flexNoGap margin-r5" for="character_exclusion">
                                        <input type="checkbox" name="character_exclusion" />
                                        <span>
                                            <small title="Switch the Character/Tags filter around to exclude the listed characters and tags from matching for this entry" data-i18n="[title]Switch the Character/Tags filter around to exclude the listed characters and tags from matching for this entry">
                                                <span data-i18n="Exclude">Exclude</span>
                                                <div class="fa-solid fa-circle-info opacity50p"></div>
                                            </small>
                                        </span>
                                    </label>
                                </div>
                                <div class="range-block-range">
                                    <select name="characterFilter" class="select2_multi_sameline" multiple>
                                        <option value="">
                                            <span data-i18n="-- Characters not found --">-- Characters not found --</span>
                                        </option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div name="WIEntryBottomControls" class="flex-container flex1 justifySpaceBetween world_entry_form_horizontal">
                            <div class="flex-container flexFlowColumn flexNoGap  wi-enter-footer-text  ">
                                <label class="checkbox flex-container">
                                    <input type="checkbox" name="selective" />
                                    <span data-i18n="Selective">Selective</span>
                                </label>
                                <label class="checkbox flex-container">
                                    <input type="checkbox" name="useProbability" />
                                    <span data-i18n="Use Probability">Use Probability</span>
                                </label>
                                <label class="checkbox flex-container">
                                    <input type="checkbox" name="addMemo">
                                    <span data-i18n="Add Memo">Add Memo</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div id="character_template" class="template_element">
        <div class="character_select entity_block flex-container wide100p alignitemsflexstart" chid="" id="">
            <div class="avatar" title="">
                <img src="">
            </div>
            <div class="flex-container wide100pLess70px character_select_container">
                <div class="wide100p character_name_block">
                    <span class="ch_name"></span>
                    <small class="ch_additional_info ch_add_placeholder">+++</small>
                    <small class="ch_additional_info character_version"></small>
                    <small class="ch_additional_info ch_avatar_url"></small>
                </div>
                <i class="ch_fav_icon fa-solid fa-star"></i>
                <input class="ch_fav" value="" hidden />
                <div class="ch_description"></div>
                <div class="tags tags_inline"></div>
            </div>
        </div>
    </div>
    <div id="tag_template" class="template_element">
        <span id="" class="tag">
            <span class="tag_name"></span>
            <i class="fa-solid fa-circle-xmark tag_remove"></i>
        </span>
    </div>
    <div id="openai_logit_bias_template" class="template_element">
        <div class="openai_logit_bias_form">
            <input class="openai_logit_bias_text text_pole" data-i18n="[placeholder]Text or token ids" placeholder="Text or [token ids]" />
            <input class="openai_logit_bias_value text_pole" type="number" min="-100" value="0" max="100" />
            <i class="menu_button fa-solid fa-xmark openai_logit_bias_remove"></i>
            </form>
        </div>
    </div>
    <div id="logit_bias_template" class="template_element">
        <div class="logit_bias_form">
            <input class="logit_bias_text text_pole" data-i18n="[placeholder]Type here..." placeholder="type here..." />
            <input class="logit_bias_value text_pole" type="number" min="-100" value="0" max="100" step="0.01" />
            <i class="menu_button fa-solid fa-xmark logit_bias_remove"></i>
        </div>
    </div>
    <div id="completion_prompt_manager_popup" class="drawer-content" style="display:none;">
        <div id="completion_prompt_manager_popup_inspect">
            <h3>Inspect</h3>
            <div class="completion_prompt_manager_popup_entry">
                <form class="completion_prompt_manager_popup_entry_form">
                    <div class="completion_prompt_manager_popup_entry_form_control">
                        <div class="completion_prompt_manager_popup_header">
                            <label for="completion_prompt_manager_popup_entry_form_prompt">
                                <span>Prompt List</span>
                            </label>
                            <a id="completion_prompt_manager_popup_close_button" title="close" data-i18n="[title]close" class="fa-solid fa-close menu_button"></a>
                        </div>
                        <div class="text_muted">The list of prompts associated with this marker.</div>
                        <div id="completion_prompt_manager_popup_entry_form_inspect_list"></div>
                    </div>
                </form>
            </div>
        </div>
        <div id="completion_prompt_manager_popup_edit">
            <h3 data-i18n="prompt_manager_edit">Edit</h3>
            <div class="completion_prompt_manager_popup_entry">
                <form class="completion_prompt_manager_popup_entry_form">
                    <div class="flex-container gap10px">
                        <div class="completion_prompt_manager_popup_entry_form_control flex1">
                            <label for="completion_prompt_manager_popup_entry_form_name">
                                <span data-i18n="prompt_manager_name">Name</span>
                            </label>
                            <div class="text_muted" data-i18n="A name for this prompt.">A name for this prompt.</div>
                            <input id="completion_prompt_manager_popup_entry_form_name" class="text_pole" type="text" name="name" />
                        </div>
                        <div class="completion_prompt_manager_popup_entry_form_control flex1">
                            <label for="completion_prompt_manager_popup_entry_form_role">
                                <span data-i18n="Role">Role</span>
                            </label>
                            <div class="text_muted" data-i18n="To whom this message will be attributed.">To whom this message will be attributed.</div>
                            <select id="completion_prompt_manager_popup_entry_form_role" class="text_pole" name="role">
                                <option data-i18n="System" value="system">System</option>
                                <option data-i18n="User" value="user">User</option>
                                <option data-i18n="AI Assistant" value="assistant">AI Assistant</option>
                            </select>
                        </div>
                    </div>
                    <div class="flex-container gap10px">
                        <div class="completion_prompt_manager_popup_entry_form_control flex1">
                            <label for="completion_prompt_manager_popup_entry_form_injection_position">
                                <span data-i18n="prompt_manager_position">Position</span>
                            </label>
                            <div class="text_muted" data-i18n="Injection position. Relative (to other prompts in prompt manager) or In-chat @ Depth.">Injection position. Relative (to other prompts in prompt manager) or In-chat @ Depth.</div>
                            <select id="completion_prompt_manager_popup_entry_form_injection_position" class="text_pole" name="injection_position">
                                <option data-i18n="prompt_manager_relative" value="0">Relative</option>
                                <option data-i18n="prompt_manager_in_chat" value="1">In-chat</option>
                            </select>
                        </div>
                        <div id="completion_prompt_manager_depth_block" class="completion_prompt_manager_popup_entry_form_control flex1">
                            <label for="completion_prompt_manager_popup_entry_form_injection_depth">
                                <span data-i18n="prompt_manager_depth">Depth</span>
                            </label>
                            <div class="text_muted" data-i18n="Injection depth. 0 = after the last message, 1 = before the last message, etc.">Injection depth. 0 = after the last message, 1 = before the last message, etc.</div>
                            <input id="completion_prompt_manager_popup_entry_form_injection_depth" class="text_pole" type="number" name="injection_depth" min="0" max="999" value="4" />
                        </div>
                    </div>
                    <div class="completion_prompt_manager_popup_entry_form_control">
                        <div class="flex-container alignItemsCenter">
                            <div class="flex1">
                                <label for="completion_prompt_manager_popup_entry_form_prompt">
                                    <span data-i18n="Prompt">Prompt</span>
                                </label>
                                <div class="text_muted" data-i18n="The prompt to be sent.">The prompt to be sent.</div>
                            </div>
                            <div id="completion_prompt_manager_forbid_overrides_block">
                                <label class="checkbox_label" for="completion_prompt_manager_popup_entry_form_forbid_overrides" title="This prompt cannot be overridden by character cards, even if overrides are preferred." data-i18n="[title]This prompt cannot be overridden by character cards, even if overrides are preferred.">
                                    <input type="checkbox" id="completion_prompt_manager_popup_entry_form_forbid_overrides" name="forbid_overrides" />
                                    <span data-i18n="prompt_manager_forbid_overrides">Forbid Overrides</span>
                                </label>
                            </div>
                        </div>
                        <textarea id="completion_prompt_manager_popup_entry_form_prompt" class="text_pole" name="prompt">
                        </textarea>
                    </div>
                    <div class="completion_prompt_manager_popup_entry_form_footer">
                        <a id="completion_prompt_manager_popup_entry_form_close" title="close" data-i18n="[title]close" class="fa-solid fa-close menu_button"></a>
                        <a id="completion_prompt_manager_popup_entry_form_reset" title="reset" data-i18n="[title]reset" class="fa-solid fa-undo menu_button"></a>
                        <a id="completion_prompt_manager_popup_entry_form_save" title="save" data-i18n="[title]save" class="fa-solid fa-save menu_button" data-pm-prompt=""></a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div id="message_template" class="template_element">
        <div class="mes" mesid="" ch_name="" is_user="" is_system="" bookmark_link="">
            <div class="for_checkbox"></div><input type="checkbox" class="del_checkbox">
            <div class="mesAvatarWrapper">
                <div class="avatar">
                    <img src="">
                </div>
                <div class="mesIDDisplay"></div>
                <div class="mes_timer"></div>
                <div class="tokenCounterDisplay"></div>
            </div>
            <div class="swipe_left fa-solid fa-chevron-left" style="display: none;"></div>
            <div class="mes_block">
                <div class="ch_name flex-container justifySpaceBetween">
                    <div class="flex-container flex1 alignitemscenter">
                        <div class="flex-container alignItemsBaseline">
                            <span class="name_text">${characterName}</span>
                            <i class="mes_ghost fa-solid fa-ghost" title="This message is invisible for the AI" data-i18n="[title]This message is invisible for the AI"></i>
                            <small class="timestamp"></small>
                        </div>
                    </div>
                    <div class="mes_buttons">
                        <!-- <div title="Message Actions" class="mes_button extraMesButtonsHint fa-solid fa-ellipsis" data-i18n="[title]Message Actions"></div> -->
                        <!-- <div class="extraMesButtons">
                            <div title="Translate message" class="mes_button mes_translate fa-solid fa-language" data-i18n="[title]Translate message"></div>
                            <div title="Generate Image" class="mes_button sd_message_gen fa-solid fa-paintbrush" data-i18n="[title]Generate Image"></div>
                            <div title="Narrate" class="mes_button mes_narrate fa-solid fa-bullhorn" data-i18n="[title]Narrate"></div>
                            <div title="Prompt" class="mes_button mes_prompt fa-solid fa-square-poll-horizontal " data-i18n="[title]Prompt" style="display: none;"></div>
                            <div title="Exclude message from prompts" class="mes_button mes_hide fa-solid fa-eye" data-i18n="[title]Exclude message from prompts"></div>
                            <div title="Include message in prompts" class="mes_button mes_unhide fa-solid fa-eye-slash" data-i18n="[title]Include message in prompts"></div>
                            <div title="Embed file or image" class="mes_button mes_embed fa-solid fa-paperclip" data-i18n="[title]Embed file or image"></div>
                            <div title="Create checkpoint" class="mes_button mes_create_bookmark fa-regular fa-solid fa-flag-checkered" data-i18n="[title]Create checkpoint"></div>
                            <div title="Create branch" class="mes_button mes_create_branch fa-regular fa-code-branch" data-i18n="[title]Create Branch"></div>
                            <div title="Copy" class="mes_button mes_copy fa-solid fa-copy " data-i18n="[title]Copy"></div>
                        </div> -->
                        <!-- <div title="Open checkpoint chat" class="mes_button mes_bookmark fa-solid fa-flag" data-i18n="[title]Open checkpoint chat"></div> -->
                        <div title="Edit" class="mes_button mes_edit fa-solid fa-pencil " data-i18n="[title]Edit"></div>
                    </div>
                    <div class="mes_edit_buttons">
                        <div class="mes_edit_done menu_button  fa-solid fa-check" title="Confirm" data-i18n="[title]Confirm"></div>
                        <!-- <div class="mes_edit_copy menu_button  fa-solid fa-copy" title="Copy this message" data-i18n="[title]Copy this message"></div> -->
                        <div class="mes_edit_delete menu_button  fa-solid fa-trash-can" title="Delete this message" data-i18n="[title]Delete this message">
                        </div>
                        <!-- <div class="mes_edit_up menu_button  fa-solid fa-chevron-up " title="Move message up" data-i18n="[title]Move message up"></div> -->
                        <div style="display: none;" class="mes_edit_down menu_button  fa-solid fa-chevron-down" title="Move message down" data-i18n="[title]Move message down">
                        </div>
                        <div class="mes_edit_cancel menu_button  fa-solid fa-xmark" title="Cancel" data-i18n="[title]Cancel"></div>
                    </div>
                </div>
                <div class="mes_text"></div>
                <div class="mes_img_container">
                    <div class="mes_img_controls">
                        <div title="Enlarge" class="right_menu_button fa-lg fa-solid fa-magnifying-glass mes_img_enlarge" data-i18n="[title]Enlarge"></div>
                        <div title="Caption" class="right_menu_button fa-lg fa-solid fa-envelope-open-text mes_img_caption" data-i18n="[title]Caption"></div>
                        <div title="Delete" class="right_menu_button fa-lg fa-solid fa-trash-can mes_img_delete" data-i18n="[title]Delete"></div>
                    </div>
                    <div class="mes_img_swipes">
                        <div title="Swipe left" class="right_menu_button fa-lg fa-solid fa-chevron-left mes_img_swipe_left" data-i18n="[title]Swipe left"></div>
                        <div class="mes_img_swipe_counter">1/1</div>
                        <div title="Swipe right" class="right_menu_button fa-lg fa-solid fa-chevron-right mes_img_swipe_right" data-i18n="[title]Swipe right"></div>
                    </div>
                    <img class="mes_img" src="" />
                </div>
                <div class="mes_bias"></div>
            </div>
            <div class="swipe_right fa-solid fa-chevron-right" style="display: none;">
                <div class="swipes-counter"></div>
            </div>
        </div>
    </div>
    <div id="group_avatars_template" class="template_element">
        <div class="avatar avatar_collage collage_1">
            <img alt="img1" class="img_1" src="">
        </div>
        <div class="avatar avatar_collage collage_2">
            <img alt="img1" class="img_1" src="">
            <img alt="img2" class="img_2" src="">
        </div>
        <div class="avatar avatar_collage collage_3">
            <img alt="img1" class="img_1" src="">
            <img alt="img2" class="img_2" src="">
            <img alt="img3" class="img_3" src="">
        </div>
        <div class="avatar avatar_collage collage_4">
            <img alt="img1" class="img_1" src="">
            <img alt="img2" class="img_2" src="">
            <img alt="img3" class="img_3" src="">
            <img alt="img4" class="img_4" src="">
        </div>
    </div>

    <div id="onboarding_template" class="template_element">
        <div class="onboarding">
            <h3 data-i18n="Welcome to SillyTavern!">Welcome to SillyTavern!</h3>
            <ul class="justifyLeft margin-bot-10px">
                <li><span data-i18n="welcome_message_part_1">Read the</span> <a href="https://docs.sillytavern.app/" target="_blank" data-i18n="welcome_message_part_2">Official Documentation</a><span data-i18n="welcome_message_part_3">.</span></li>
                <li><span data-i18n="welcome_message_part_4">Type</span> <code>/help</code> <span data-i18n="welcome_message_part_5">in chat for commands and macros.</span></li>
                <li><span data-i18n="welcome_message_part_6">Join the</span> <a href="https://discord.gg/sillytavern" data-i18n="Discord server" target="_blank">Discord server</a> <span data-i18n="welcome_message_part_7">for info and announcements.</span></li>
            </ul>
            <div id="onboarding-UI-language-block" class="flex-container alignItemsBaseline">
                <span data-i18n="UI Language">Language:</span>
                <select id="onboarding_ui_language_select" class="flex1 margin0">
                    <option value="en">English</option>
                </select>
            </div>
            <b data-i18n="SillyTavern is aimed at advanced users.">
                SillyTavern is aimed at advanced users.
            </b>
            <div>
                <span data-i18n="If you're new to this, enable the simplified UI mode below.">
                    If you're new to this, enable the simplified UI mode below.
                </span>
                <br>
                <span data-i18n="Change it later in the 'User Settings' panel.">
                    Change it later in the 'User Settings' panel.
                </span>
            </div>
            <label class="checkbox_label">
                <input type="checkbox" name="enable_simple_mode" />
                <span data-i18n="Enable simple UI mode">
                    Enable simple UI mode
                </span>
            </label>
            <div class="expander"></div>
            <div class="textAlignCenter">
                <h3 data-i18n="Looking for AI characters?">
                    Looking for AI characters?
                </h3>
                <span>
                    <span class="menu_button menu_button_icon external_import_button">
                        <i class="fa-solid fa-cloud-arrow-down"></i>
                        <span data-i18n="onboarding_import">Import</span>
                    </span>
                    <span data-i18n="from supported sources or view">
                        from supported sources or view
                    </span>
                    <span class="open_characters_library menu_button menu_button_icon">
                        <i class="fa-solid fa-image-portrait"></i>
                        <span data-i18n="Sample characters">Sample characters</span>
                    </span>
                </span>
            </div>
            <div class="expander"></div>
            <h3 data-i18n="Your Persona">
                Your Persona
            </h3>
            <div class="justifyLeft margin-bot-10px">
                <span data-i18n="Before you get started, you must select a persona name.">
                    Before you get started, you must select a persona name.
                </span>
                <br>
                <span data-i18n="welcome_message_part_8">This can be changed at any time via the</span> <code><i class="fa-solid fa-face-smile"></i></code> <span data-i18n="welcome_message_part_9">icon.</span>
            </div>
            <h4 data-i18n="Persona Name:">Persona Name:</h4>
        </div>
    </div>
    <div id="group_member_template" class="template_element">
        <div class="group_member">
            <div class="avatar">
                <img alt="Avatar" src="" />
            </div>
            <div class="group_member_name">
                <div class="ch_name"></div>
                <div class="tags tags_inline"></div>
            </div>
            <input class="ch_fav" value="" hidden />
            <div class="queue_position"></div>
            <div class="group_member_icon">
                <div title="Temporarily disable automatic replies from this character" data-action="disable" class="right_menu_button fa-solid fa-lg fa-comment-slash" data-i18n="[title]Temporarily disable automatic replies from this character"></div>
                <div title="Enable automatic replies from this character" data-action="enable" class="right_menu_button fa-solid fa-lg fa-comment-slash" data-i18n="[title]Enable automatic replies from this character"></div>
                <div title="Trigger a message from this character" data-action="speak" class="right_menu_button fa-solid fa-lg fa-comment" data-i18n="[title]Trigger a message from this character"></div>
                <div class="flexFlowColumn flex-container">
                    <div title="Move up" data-action="up" class="right_menu_button fa-solid fa-chevron-up" data-i18n="[title]Move up"></div>
                    <div title="Move down" data-action="down" class="right_menu_button fa-solid fa-chevron-down" data-i18n="[title]Move down"></div>
                </div>
                <div title="View character card" data-action="view" class="right_menu_button fa-solid fa-xl fa-image-portrait" data-i18n="[title]View character card"></div>
                <div title="Remove from group" data-action="remove" class="right_menu_button fa-solid fa-2xl fa-xmark" data-i18n="[title]Remove from group">
                </div>
                <div title="Add to group" data-action="add" class="right_menu_button fa-solid fa-2xl fa-plus" data-i18n="[title]Add to group"></div>
            </div>
        </div>
    </div>
    <div id="group_list_template" class="template_element">
        <div class="group_select entity_block flex-container wide100p alignitemsflexstart">
            <div class="avatar">
                <img src="">
            </div>
            <div class="flex-container wide100pLess70px gap5px group_select_container">
                <div class="wide100p group_name_block character_name_block">
                    <div class="ch_name"></div>
                    <small class="ch_additional_info group_select_counter"></small>
                </div>
                <small class="character_name_block_sub_line">in this group</small>
                <i class='group_fav_icon fa-solid fa-star'></i>
                <input class="ch_fav" value="" hidden />
                <div class="group_select_block_list ch_description"></div>
                <div class="tags tags_inline"></div>
            </div>
        </div>
    </div>
    <div id="bogus_folder_template" class="template_element">
        <div class="bogus_folder_select entity_block flex-container wide100p alignitemsflexstart">
            <div class="avatar flex alignitemscenter textAlignCenter">
                <i class="bogus_folder_icon fa-solid fa-xl"></i>
            </div>
            <div class="flex-container wide100pLess70px character_select_container">
                <div class="wide100p character_name_block">
                    <span class="ch_name"></span>
                    <small class="ch_additional_info bogus_folder_counter"></small>
                </div>
                <small class="character_name_block_sub_line bogus_folder_hidden_counter"></small>
                <div class="bogus_folder_avatars_block avatars_inline avatars_inline_small tags tags_inline"></div>
            </div>
        </div>
    </div>
    <div id="bogus_folder_back_template" class="template_element">
        <div class="bogus_folder_select bogus_folder_select_back flex-container wide100p alignitemsflexstart" id="BogusFolderBack" tagid="back">
            <div class="avatar flex alignitemscenter textAlignCenter">
                <i class="bogus_folder_icon fa-solid fa-xl fa-right-from-bracket fa-flip-horizontal"></i>
            </div>
            <div class="bogus_folder_back_placeholder flex alignitemscenter textAlignCenter">
                <i class="bogus_folder_icon fa-solid fa-xl fa-right-from-bracket fa-flip-horizontal"></i>
            </div>
            <div class="flex-container wide100pLess70px character_select_container height100p alignitemscenter">
                <div class="wide100p character_name_block">
                    <span class="ch_name">Go back</span>
                </div>
            </div>
        </div>
    </div>
    <div id="inline_avatar_template" class="template_element">
        <div class="avatar inline_avatar flex alignitemscenter textAlignCenter">
            <img src="">
        </div>
    </div>
    <div id="alternate_greetings_template" class="template_element">
        <div class="alternate_grettings flexFlowColumn flex-container">
            <div class="title_restorable">
                <h3><span data-i18n="Alternate Greetings">Alternate Greetings</span></h3>
                <div title="Add" class="menu_button fa-solid fa-plus add_alternate_greeting" data-i18n="[title]Add"></div>
            </div>
            <small class="justifyLeft" data-i18n="Alternate_Greetings_desc">
                These will be displayed as swipes on the first message when starting a new chat.
                Group members can select one of them to initiate the conversation.
            </small>
            <hr>
            <div class="alternate_greetings_list flexFlowColumn flex-container wide100p">
                <strong class="alternate_grettings_hint margin-bot-10px">
                    <span data-i18n="alternate_greetings_hint_1">Click the</span> <i class="fa-solid fa-plus"></i> <span data-i18n="alternate_greetings_hint_2">button to get started!</span>
                </strong>
            </div>
        </div>
    </div>
    <div id="alternate_greeting_form_template" class="template_element">
        <div class="alternate_greeting">
            <div class="title_restorable">
                <strong><span data-i18n="Alternate Greeting #">Alternate Greeting #</span><span class="greeting_index"></span></strong>
                <div class="menu_button fa-solid fa-trash-alt delete_alternate_greeting"></div>
            </div>
            <textarea name="alternate_greetings" data-i18n="[placeholder](This will be the first message from the character that starts every chat)" placeholder="(This will be the first message from the character that starts every chat)" class="text_pole textarea_compact alternate_greeting_text" maxlength="50000" value="" autocomplete="off" rows="16"></textarea>
        </div>
    </div>

    <!-- chat and input bar -->
    <div id="typing_indicator_template" class="template_element">
        <div class="typing_indicator"><span class="typing_indicator_name">CHAR</span> is typing</div>
    </div>
    <div id="message_file_template" class="template_element">
        <div class="mes_file_container">
            <div class="fa-lg fa-solid fa-file-alt mes_file_icon"></div>
            <div class="mes_file_name"></div>
            <div class="mes_file_size"></div>
            <div class="right_menu_button mes_file_open fa-solid fa-magnifying-glass" title="View contents" data-i18n="[title]View contents"></div>
            <div class="right_menu_button mes_file_delete fa-solid fa-trash-can" title="Remove the file" data-i18n="[title]Remove the file"></div>
        </div>
    </div>
    <div id="movingDivs">
        <div id="floatingPrompt" class="drawer-content flexGap5">
            <div class="panelControlBar flex-container alignItemsBaseline">
                <div id="floatingPromptheader" class="fa-fw fa-solid fa-grip drag-grabber"></div>
                <div id="floatingPromptMaximize" class="inline-drawer-maximize">
                    <i class="floating_panel_maximize fa-fw fa-solid fa-window-maximize"></i>
                </div>
                <div id="ANClose" class="fa-fw fa-solid fa-circle-xmark floating_panel_close"></div>
            </div>
            <div name="floatingPromptHolder" class="scrollY">
                <div class="inline-drawer">
                    <div id="ANBlockToggle" class="inline-drawer-toggle inline-drawer-header">
                        <b data-i18n="Author's Note">Author's Note</b>
                        <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
                    </div>
                    <div class="inline-drawer-content">
                        <small>
                            <b data-i18n="Unique to this chat">Unique to this chat</b>.<br>
                            <span data-i18n="Checkpoints inherit the Note from their parent, and can be changed individually after that.">Checkpoints inherit the Note from their parent, and can be changed individually after that.</span><br>
                        </small>
                        <textarea id="extension_floating_prompt" class="text_pole textarea_compact" rows="8" maxlength="50000"></textarea>
                        <div class="extension_token_counter">
                            <span data-i18n="extension_token_counter">Tokens:</span> <span id="extension_floating_prompt_token_counter">0</span>
                        </div>
                        <label class="checkbox_label" for="extension_floating_allow_wi_scan">
                            <input id="extension_floating_allow_wi_scan" type="checkbox" />
                            <span data-i18n="Include in World Info Scanning">Include in World Info Scanning</span>
                        </label>
                        <div class="floating_prompt_radio_group">
                            <label class="checkbox_label" for="extension_floating_position_before">
                                <input type="radio" id="extension_floating_position_before" name="extension_floating_position" value="2" />
                                <span data-i18n="Before Main Prompt / Story String">Before Main Prompt / Story String</span>
                            </label>
                            <label class="checkbox_label" for="extension_floating_position_after">
                                <input type="radio" id="extension_floating_position_after" name="extension_floating_position" value="0" />
                                <span data-i18n="After Main Prompt / Story String">After Main Prompt / Story String</span>
                            </label>
                            <label class="checkbox_label alignItemsCenter" for="extension_floating_position_depth">
                                <input type="radio" id="extension_floating_position_depth" name="extension_floating_position" value="1" />
                                <span data-i18n="In-chat @ Depth">In-chat @ Depth</span>
                                <input id="extension_floating_depth" class="text_pole textarea_compact widthNatural" type="number" min="0" max="999" />
                                <span data-i18n="as">as</span>
                                <select id="extension_floating_role" class="text_pole widthNatural">
                                    <option data-i18n="System" value="0">System</option>
                                    <option data-i18n="User" value="1">User</option>
                                    <option data-i18n="Assistant" value="2">Assistant</option>
                                </select>
                            </label>
                        </div>
                        <!--<label for="extension_floating_interval">In-Chat Insertion Depth</label>-->
                        <div class="flex-container">
                            <label for="extension_floating_interval" class="flex-container flexNoGap flexFlowColumn">
                                <span data-i18n="Insertion Frequency">Insertion Frequency</span>
                                <small data-i18n="(0 = Disable, 1 = Always)">(0 = Disable, 1 = Always)</small>
                            </label>
                            <input id="extension_floating_interval" class="text_pole widthUnset" type="number" min="0" max="999" />
                        </div>
                        <br>
                        <span><span data-i18n="User inputs until next insertion:">User inputs until next insertion:</span> <span id="extension_floating_counter">(disabled)</span></span>
                    </div>
                </div>
                <hr class="sysHR">
                <div class="inline-drawer">
                    <div id="charaANBlockToggle" class="inline-drawer-toggle inline-drawer-header">
                        <div class="flex-container flexFlowColumn">
                            <b data-i18n="Character Author's Note (Private)">
                                Character Author's Note (Private)
                            </b>
                            <small data-i18n="Won't be shared with the character card on export.">
                                Won't be shared with the character card on export.
                            </small>
                        </div>
                        <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
                    </div>
                    <div class="inline-drawer-content">
                        <small data-i18n="Will be automatically added as the author's note for this character. Will be used in groups, but can't be modified when a group chat is open.">Will be automatically added as the author's note for this character. Will be used in groups, but
                            can't be modified when a group chat is open.</small>
                        <textarea id="extension_floating_chara" class="text_pole textarea_compact" rows="8" maxlength="50000" placeholder="Example:&#10;[Scenario: wacky adventures; Genre: romantic comedy; Style: verbose, creative]"></textarea>
                        <div class="extension_token_counter">
                            <span data-i18n="extension_token_counter">Tokens:</span> <span id="extension_floating_chara_token_counter">0</span>
                        </div>
                        <label class="checkbox_label" for="extension_use_floating_chara">
                            <input id="extension_use_floating_chara" type="checkbox" />
                            <span data-i18n="Use character author's note">Use character author's note</span>
                        </label>
                        <div class="floating_prompt_radio_group">
                            <label>
                                <input type="radio" name="extension_floating_char_position" value="0" />
                                <span data-i18n="Replace Author's Note">Replace Author's Note</span>
                            </label>
                            <label>
                                <input type="radio" name="extension_floating_char_position" value="1" />
                                <span data-i18n="Top of Author's Note">Top of Author's Note</span>
                            </label>
                            <label>
                                <input type="radio" name="extension_floating_char_position" value="2" />
                                <span data-i18n="Bottom of Author's Note">Bottom of Author's Note</span>
                            </label>
                        </div>
                    </div>
                </div>
                <hr class="sysHR">
                <div class="inline-drawer">
                    <div id="defaultANBlockToggle" class="inline-drawer-toggle inline-drawer-header">
                        <b data-i18n="Default Author's Note">Default Author's Note</b>
                        <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
                    </div>
                    <div class="inline-drawer-content">
                        <small data-i18n="Will be automatically added as the Author's Note for all new chats.">Will be automatically added as the Author's Note for all new chats.</small>
                        <textarea id="extension_floating_default" class="text_pole textarea_compact" rows="8" maxlength="50000" placeholder="Example:&#10;[Scenario: wacky adventures; Genre: romantic comedy; Style: verbose, creative]"></textarea>
                        <div class="extension_token_counter">
                            <span data-i18n="extension_token_counter">Tokens:</span> <span id="extension_floating_default_token_counter">0</span>
                        </div>
                        <div class="floating_prompt_radio_group">
                            <label class="checkbox_label" for="extension_default_position_before">
                                <input type="radio" id="extension_default_position_before" name="extension_default_position" value="2" />
                                <span data-i18n="Before Main Prompt / Story String">Before Main Prompt / Story String</span>
                            </label>
                            <label class="checkbox_label" for="extension_default_position_after">
                                <input type="radio" id="extension_default_position_after" name="extension_default_position" value="0" />
                                <span data-i18n="After Main Prompt / Story String">After Main Prompt / Story String</span>
                            </label>
                            <label class="checkbox_label alignItemsCenter" for="extension_default_position_depth">
                                <input type="radio" id="extension_default_position_depth" name="extension_default_position" value="1" />
                                <span data-i18n="In-chat @ Depth">In-chat @ Depth</span>
                                <input id="extension_default_depth" class="text_pole textarea_compact widthNatural" type="number" min="0" max="999" />
                                <span data-i18n="as">as</span>
                                <select id="extension_default_role" class="text_pole widthNatural">
                                    <option data-i18n="System" value="0">System</option>
                                    <option data-i18n="User" value="1">User</option>
                                    <option data-i18n="Assistant" value="2">Assistant</option>
                                </select>
                            </label>
                        </div>
                        <div class="flex-container">
                            <label for="extension_default_interval" class="flex-container flexNoGap flexFlowColumn">
                                <span data-i18n="Insertion Frequency">Insertion Frequency</span>
                                <small data-i18n="(0 = Disable, 1 = Always)">(0 = Disable, 1 = Always)</small>
                            </label>
                            <input id="extension_default_interval" class="text_pole widthUnset" type="number" min="0" max="999" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="cfgConfig" class="drawer-content flexGap5">
            <div class="panelControlBar flex-container alignItemsBaseline">
                <div id="cfgConfigheader" class="fa-fw fa-solid fa-grip drag-grabber"></div>
                <div id="cfgConfigMaximize" class="inline-drawer-maximize">
                    <i class="floating_panel_maximize fa-fw fa-solid fa-window-maximize"></i>
                </div>
                <div id="CFGClose" class="fa-fw fa-solid fa-circle-xmark floating_panel_close"></div>
            </div>
            <div name="cfgConfigHolder" class="scrollY">
                <div id="chat_cfg_container">
                    <div class="inline-drawer">
                        <div id="CFGBlockToggle" class="inline-drawer-toggle inline-drawer-header">
                            <b data-i18n="Chat CFG">Chat CFG</b>
                            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
                        </div>
                        <div class="inline-drawer-content">
                            <small>
                                <b data-i18n="Unique to this chat">Unique to this chat</b>.<br>
                            </small>
                            <label for="chat_cfg_guidance_scale">
                                <span data-i18n="Scale">Scale</span>
                                <small data-i18n="1 = disabled">1 = disabled</small>
                            </label>
                            <div class="range-block-range-and-counter">
                                <div class="range-block-range">
                                    <input type="range" id="chat_cfg_guidance_scale" name="volume" min="0.10" max="4.00" step="0.05">
                                </div>
                                <div class="range-block-counter">
                                    <input type="number" min="0.10" max="4.00" step="0.05" data-for="chat_cfg_guidance_scale" id="chat_cfg_guidance_scale_counter">
                                </div>
                            </div>
                            <div>
                                <label for="chat_cfg_negative_prompt">
                                    <span data-i18n="Negative Prompt">Negative Prompt</span>
                                </label>
                                <textarea id="chat_cfg_negative_prompt" rows="2" class="text_pole textarea_compact" data-i18n="[placeholder]write short replies, write replies using past tense" placeholder="write short replies, write replies using past tense"></textarea>
                                <label for="chat_cfg_positive_prompt">
                                    <span data-i18n="Positive Prompt">Positive Prompt</span>
                                </label>
                                <textarea id="chat_cfg_positive_prompt" rows="2" class="text_pole textarea_compact" data-i18n="[placeholder]write short replies, write replies using past tense" placeholder="write short replies, write replies using past tense"></textarea>
                            </div>
                            <div id="groupchat_cfg_use_chara_container">
                                <label class="checkbox_label" for="groupchat_cfg_use_chara">
                                    <input type="checkbox" id="groupchat_cfg_use_chara" />
                                    <span data-i18n="Use character CFG scales">Use character CFG scales</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="chara_cfg_container" style="display: none;">
                    <hr class="sysHR">
                    <div class="inline-drawer">
                        <div id="charaANBlockToggle" class="inline-drawer-toggle inline-drawer-header">
                            <b data-i18n="Character CFG">Character CFG</b>
                            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
                        </div>
                        <div class="inline-drawer-content">
                            <small><b data-i18n="Will be automatically added as the CFG for this character.">Will be automatically added as the CFG for this character.</b></small>
                            <br />
                            <label for="chara_cfg_guidance_scale">
                                <span data-i18n="Scale">Scale</span>
                                <small data-i18n="1 = disabled">1 = disabled</small>
                            </label>
                            <div class="range-block-range-and-counter">
                                <div class="range-block-range">
                                    <input type="range" id="chara_cfg_guidance_scale" name="volume" min="0.10" max="4.00" step="0.05">
                                </div>
                                <div class="range-block-counter">
                                    <input type="number" min="0.10" max="4.00" step="0.05" data-for="chara_cfg_guidance_scale" id="chara_cfg_guidance_scale_counter">
                                </div>
                            </div>
                            <div>
                                <label for="chara_cfg_negative_prompt">
                                    <span data-i18n="Negative Prompt">Negative Prompt</span>
                                </label>
                                <textarea id="chara_cfg_negative_prompt" rows="2" class="text_pole textarea_compact" data-i18n="[placeholder]write short replies, write replies using past tense" placeholder="write short replies, write replies using past tense"></textarea>
                                <label for="chara_cfg_positive_prompt">
                                    <span data-i18n="Positive Prompt">Positive Prompt</span>
                                </label>
                                <textarea id="chara_cfg_positive_prompt" rows="2" class="text_pole textarea_compact" data-i18n="[placeholder]write short replies, write replies using past tense" placeholder="write short replies, write replies using past tense"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="global_cfg_container">
                    <hr class="sysHR">
                    <div class="inline-drawer">
                        <div id="defaultANBlockToggle" class="inline-drawer-toggle inline-drawer-header">
                            <b data-i18n="Global CFG">Global CFG</b>
                            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
                        </div>
                        <div class="inline-drawer-content">
                            <small><b data-i18n="Will be used as the default CFG options for every chat unless overridden.">Will be used as the default CFG options for every chat unless overridden.</b></small>
                            <br />
                            <label for="global_cfg_guidance_scale">
                                <span data-i18n="Scale">Scale</span>
                                <small data-i18n="1 = disabled">1 = disabled</small>
                            </label>
                            <div class="range-block-range-and-counter">
                                <div class="range-block-range">
                                    <input type="range" id="global_cfg_guidance_scale" name="volume" min="0.10" max="4.00" step="0.05">
                                </div>
                                <div class="range-block-counter">
                                    <input type="number" min="0.10" max="4.00" step="0.05" data-for="global_cfg_guidance_scale" id="global_cfg_guidance_scale_counter">
                                </div>
                            </div>
                            <div>
                                <label for="global_cfg_negative_prompt">
                                    <span data-i18n="Negative Prompt">Negative Prompt</span>
                                </label>
                                <textarea id="global_cfg_negative_prompt" rows="2" class="text_pole textarea_compact" data-i18n="[placeholder]write short replies, write replies using past tense" placeholder="write short replies, write replies using past tense"></textarea>
                                <label for="global_cfg_positive_prompt">
                                    <span data-i18n="Positive Prompt">Positive Prompt</span>
                                </label>
                                <textarea id="global_cfg_positive_prompt" rows="2" class="text_pole textarea_compact" data-i18n="[placeholder]write short replies, write replies using past tense" placeholder="write short replies, write replies using past tense"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="cfg_prompt_combine_container">
                    <hr class="sysHR">
                    <div class="inline-drawer">
                        <div id="defaultANBlockToggle" class="inline-drawer-toggle inline-drawer-header">
                            <b data-i18n="CFG Prompt Cascading">CFG Prompt Cascading</b>
                            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
                        </div>
                        <div class="inline-drawer-content">
                            <div class="flex-container flexFlowColumn">
                                <small>
                                    <b data-i18n="Combine positive/negative prompts from other boxes.">Combine positive/negative prompts from other boxes.</b>
                                    <br />
                                    <span data-i18n="For example, ticking the chat, global, and character boxes combine all negative prompts into a comma-separated string.">For example, ticking the chat, global, and character boxes combine all negative prompts into a comma-separated string.</span>
                                </small>
                            </div>
                            <br />
                            <div class="flex-container flexFlowColumn">
                                <label for="cfg_prompt_combine">
                                    <span data-i18n="Always Include">Always Include</span>
                                </label>
                                <label class="checkbox_label">
                                    <input type="checkbox" name="cfg_prompt_combine" value="0" />
                                    <span data-i18n="Chat Negatives">Chat Negatives</span>
                                </label>
                                <label class="checkbox_label">
                                    <input type="checkbox" name="cfg_prompt_combine" value="1" />
                                    <span data-i18n="Character Negatives">Character Negatives</span>
                                </label>
                                <label class="checkbox_label">
                                    <input type="checkbox" name="cfg_prompt_combine" value="2" />
                                    <span data-i18n="Global Negatives">Global Negatives</span>
                                </label>
                            </div>
                            <div class="flex-container flexFlowColumn">
                                <label>
                                    <span data-i18n="Custom Separator:">Custom Separator:</span> <input id="cfg_prompt_separator" class="text_pole textarea_compact widthUnset" placeholder="&quot;\n&quot;" type="text" />
                                </label>
                                <label>
                                    <span data-i18n="Insertion Depth:">Insertion Depth:</span> <input id="cfg_prompt_insertion_depth" class="text_pole widthUnset" type="number" min="0" max="99" />
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="logprobsViewer" class="drawer-content inline-drawer flexGap5">
            <div class="logprobs_panel_header">
                <div class="logprobs_panel_header">
                    <b data-i18n="Token Probabilities">Token Probabilities</b>
                </div>
                <div class="logprobs_panel_controls">
                    <div id="logprobsViewerheader" class="logprobs_panel_control_button drag-grabber">
                        <i class="custom-drawer-icon fa-solid fa-grip"></i>
                    </div>
                    <div id="logprobsMaximizeToggle" class="logprobs_panel_control_button inline-drawer-maximize fa-solid">
                        <i class="inline-drawer-icon fa-solid fa-window-maximize"></i>
                    </div>
                    <div id="logprovsViewerBlockToggle" class="logprobs_panel_control_button inline-drawer-toggle">
                        <i class="inline-drawer-icon fa-solid fa-circle-chevron-up up"></i>
                    </div>
                    <div id="logprobsViewerClose" class="logprobs_panel_control_button inline-drawer-icon fa-solid fa-circle-xmark "></div>
                </div>
            </div>
            <div class="logprobs_panel_content inline-drawer-content flex-container flexFlowColumn">
                <small>
                    <b data-i18n="Select a token to see alternatives considered by the AI.">Select a token to see alternatives considered by the AI.</b>
                </small>
                <hr>
                <div id="logprobs_generation_output"></div>
                <div id="logprobs_selected_top_logprobs" class="logprobs_candidate_list"></div>
            </div>
        </div>

    </div>
    <div id="sheld">
        <div id="sheldheader" class="fa-solid fa-grip drag-grabber"></div>
        <div id="chat">
        </div>
        <div id="form_sheld">
            <div id="dialogue_del_mes">
                <div id="dialogue_del_mes_ok" class="menu_button">Delete</div>
                <div id="dialogue_del_mes_cancel" class="menu_button">Cancel</div>
            </div>
            <div id="send_form" class="no-connection">
                <form id="file_form" class="wide100p displayNone">
                    <div class="file_attached">
                        <input id="file_form_input" type="file" hidden>
                        <input id="embed_file_input" type="file" hidden>
                        <i class="fa-solid fa-file-alt"></i>
                        <span class="file_name">File Name</span>
                        <span class="file_size">File Size</span>
                        <button id="file_form_reset" type="reset" class="menu_button" title="Remove the file" data-i18n="[title]Remove the file">
                            <i class="fa fa-times"></i>
                        </button>
                    </div>
                </form>
                <div id="nonQRFormItems">
                    <div id="leftSendForm" class="alignContentCenter">
                        <div id="options_button" class="fa-solid fa-bars interactable"></div>
                    </div>
                    <textarea id="send_textarea" name="text" data-i18n="[no_connection_text]Not connected to API!;[connected_text]Type a message, or /? for help" placeholder="Not connected to API!" no_connection_text="Not connected to API!" connected_text="Type a message, or /? for help"></textarea>
                    <div id="rightSendForm" class="alignContentCenter">
                        <!-- <div id="stscript_continue" title="Continue script execution" class="stscript_btn stscript_continue" data-i18n="[title]Continue script execution">
                            <i class="fa-solid fa-play"></i>
                        </div>
                        <div id="stscript_pause" title="Pause script execution" class="stscript_btn stscript_pause" data-i18n="[title]Pause script execution">
                            <i class="fa-solid fa-pause"></i>
                        </div>
                        <div id="stscript_stop" title="Abort script execution" class="stscript_btn stscript_stop" data-i18n="[title]Abort script execution">
                            <i class="fa-solid fa-stop"></i>
                        </div> -->
                        <div id="mes_stop" title="Abort request" class="mes_stop" data-i18n="[title]Abort request">
                            <i class="fa-solid fa-circle-stop"></i>
                        </div>
                        <!-- <div id="mes_impersonate" class="fa-solid fa-user-secret interactable displayNone" title="Ask AI to write your message for you" data-i18n="[title]Ask AI to write your message for you" tabindex="0"></div> -->
                        <!-- <div id="mes_continue" class="fa-fw fa-solid fa-arrow-right interactable displayNone" title="Continue the last message" data-i18n="[title]Continue the last message"></div> -->
                        <div id="send_but" class="fa-solid fa-paper-plane interactable displayNone" title="Send a message" data-i18n="[title]Send a message"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- popups live outside sheld to avoid blur conflicts -->
    <div id="options" class="font-family-reset" style="display: none;">
        <div class="options-content">
            <!-- <a id="option_close_chat" class="displayNone">
                <i class="fa-lg fa-solid fa-times"></i>
                <span data-i18n="Close chat">Close chat</span>
            </a>
            <a id="option_settings" class="displayNone">
                <i class="fa-lg fa-solid fa-cog"></i>
                <span data-i18n="Toggle Panels">Toggle Panels</span>
            </a>
            <a id="option_toggle_AN">
                <i class="fa-lg fa-solid fa-note-sticky"></i>
                <span data-i18n="Author's Note">Author's Note</span>
            </a> -->
            <!-- <a data-newbie-hidden id="option_toggle_CFG">
                <i class="fa-lg fa-solid fa-scale-balanced"></i>
                <span data-i18n="CFG Scale">CFG Scale</span>
            </a>
            <a data-newbie-hidden id="option_toggle_logprobs">
                <i class="fa-lg fa-solid fa-pie-chart"></i>
                <span data-i18n="Token Probabilities">Token Probabilities</span>
            </a>
            <a id="option_back_to_main">
                <i class="fa-lg fa-solid fa-left-long"></i>
                <span data-i18n="Back to parent chat">Back to parent chat</span>
            </a>
            <a id="option_new_bookmark">
                <i class="fa-lg fa-solid fa-flag"></i>
                <span data-i18n="Save checkpoint">Save checkpoint</span>
            </a>
            <a id="option_convert_to_group">
                <i class="fa-lg fa-solid fa-people-arrows"></i>
                <span data-i18n="Convert to group">Convert to group</span>
            </a> -->
            
            <a id="option_start_new_chat">
                <i class="fa-lg fa-solid fa-comments"></i>
                <span>开始新聊天</span>
            </a>
            <a id="option_select_chat">
              <i class="fa-lg fa-solid fa-address-book"></i>
              <span>维护模式</span>
          </a>
            <!-- <hr>
            <a id="option_close_chat">
                <i class="fa-lg fa-solid fa-times"></i>
                <span data-i18n="Close chat">Close chat</span>
            </a>
            <a id="option_select_chat">
                <i class="fa-lg fa-solid fa-address-book"></i>
                <span data-i18n="Manage chat files">Manage chat files</span>
            </a>
            <hr>
            <a id="option_delete_mes">
                <i class="fa-lg fa-solid fa-trash-can"></i>
                <span data-i18n="Delete messages">Delete messages</span>
            </a> -->
            <a id="option_regenerate">
                <i class="fa-lg fa-solid fa-repeat"></i>
                <span>重新生成</span>
            </a>
            <!-- <a id="option_impersonate" title="Ask AI to write your message for you" data-i18n="[title]Ask AI to write your message for you">
                <i class="fa-lg fa-solid fa-user-secret"></i>
                <span data-i18n="Impersonate">Impersonate</span>
            </a> -->
            <a id="option_continue" title="Continue the last message" data-i18n="[title]Continue the last message">
                <i class="fa-lg fa-solid fa-arrow-right"></i>
                <span>继续</span>
            </a>
        </div>
    </div>
    <div id="export_format_popup" class="list-group">
        <div class="export_format list-group-item" data-format="png">PNG</div>
        <div class="export_format list-group-item" data-format="json">JSON</div>
    </div>
    <div id="zoomed_avatar_template" class="template_element">
        <div class="zoomed_avatar">
            <div class="panelControlBar flex-container">
                <div class="fa-fw fa-solid fa-grip drag-grabber"></div>
                <div class="fa-fw fa-solid fa-circle-xmark dragClose" id="closeZoom"></div>
            </div>
            <div class="zoomed_avatar_container">
                <img class="zoomed_avatar_img" src="" data-izoomify-url="" data-izoomify-magnify="1.8" data-izoomify-duration="300" alt="">
            </div>
        </div>
    </div>
    <template id="generic_draggable_template">
        <div class="draggable">
            <div class="dragTitle"></div>
            <div class="panelControlBar flex-container">
                <div class="fa-fw fa-solid fa-grip drag-grabber"></div>
                <div class="fa-fw fa-solid fa-circle-xmark dragClose"></div>
            </div>
        </div>
    </template>
    <div id="user_avatar_template" class="template_element">
        <div class="avatar-container">
            <div imgfile="" class="avatar">
                <img src="" alt="User Avatar">
            </div>
            <div class="flex-container wide100pLess70px character_select_container">
                <div class="wide100p character_name_block">
                    <span class="ch_name flex1"></span>
                    <div class="avatar-buttons">
                        <button class="menu_button bind_user_name" title="Bind user name to that avatar" data-i18n="[title]Bind user name to that avatar">
                            <i class="fa-fw fa-solid fa-user-edit"></i>
                        </button>
                        <button class="menu_button set_persona_image" title="Change persona image" data-i18n="[title]Change persona image">
                            <i class="fa-fw fa-solid fa-image"></i>
                        </button>
                        <button class="menu_button set_default_persona" title="Select this as default persona for the new chats." data-i18n="[title]Select this as default persona for the new chats.">
                            <i class="fa-fw fa-solid fa-crown"></i>
                        </button>
                        <button class="menu_button duplicate_persona" title="Duplicate persona" data-i18n="[title]Duplicate persona">
                            <i class="fa-fw fa-solid fa-clone"></i>
                        </button>
                        <button class="menu_button delete_avatar" title="Delete persona" data-i18n="[title]Delete persona">
                            <i class="fa-fw fa-solid fa-trash-alt"></i>
                        </button>
                    </div>
                </div>
                <div class="ch_description"></div>
            </div>
        </div>
    </div>
  </div>
  <script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
  <script nomodule crossorigin id="vite-legacy-polyfill" src="/static/polyfills-legacy.js"></script>
  <script nomodule crossorigin id="vite-legacy-entry" data-src="/static/index-legacy.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
    <!-- Script includes -->
    <script src="lib/diff_match_patch.js"></script>
    <script src="lib/object-hasown.js"></script>
    <script src="lib/jquery-3.5.1.min.js"></script>
    <script src="lib/jquery-ui.min.js"></script>
    <script src="lib/jquery.transit.min.js"></script>
    <script src="lib/jquery-cookie-1.4.1.min.js"></script>
    <script src="lib/jquery.ui.touch-punch.min.js"></script>
    <script src="lib/showdown.min.js"></script>
    <script src="lib/showdown-katex.min.js"></script>
    <script src="lib/popper.js"></script>
    <script src="lib/purify.min.js"></script>
    <script src="lib/highlight.min.js"></script>
    <script src="lib/moment.min.js"></script>
    <script src="lib/cropper.min.js"></script>
    <script src="lib/jquery-cropper.min.js"></script>
    <script src="lib/toastr.min.js"></script>
    <script src="lib/fuse.js"></script>
    <script src="lib/select2.min.js"></script>
    <script src="lib/select2-search-placeholder.js"></script>
    <script src="lib/seedrandom.min.js"></script>
    <script src="lib/droll.js"></script>
    <script src="lib/localforage.min.js"></script>
    <script src="lib/handlebars.js"></script>
    <script src="lib/pagination.js"></script>
    <script src="lib/toolcool-color-picker.js"></script>
    <script src="lib/svg-inject.js"></script>
    <script src="lib/Readability.js"></script>
    <script src="lib/Readability-readerable.js"></script>
    <script src="lib/jquery.izoomify.js"></script>
    <script type="module" src="lib/structured-clone/monkey-patch.js"></script>
    <script type="module" src="lib/swiped-events.js"></script>
    <script type="module" src="lib/eventemitter.js"></script>
    <script type="module" src="scripts/i18n.js"></script>
    <script type="module" src="scripts/bulk-edit.js"></script>
    <script type="module" src="scripts/setting-search.js"></script>
    <script type="module" src="scripts/server-history.js"></script>
    <script type="module" src="script.js"></script>
    <script type="module" crossorigin src="/static/index.js"></script>
    <link rel="stylesheet" crossorigin href="/static/index.css">
    <script type="module">import.meta.url;import("_").catch(()=>1);(async function*(){})().next();if(location.protocol!="file:"){window.__vite_is_modern_browser=true}</script>
    <script type="module">!function(){if(window.__vite_is_modern_browser)return;console.warn("vite: loading legacy chunks, syntax error above and the same error below should be ignored");var e=document.getElementById("vite-legacy-polyfill"),n=document.createElement("script");n.src=e.src,n.onload=function(){System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))},document.body.appendChild(n)}();</script>
    <script>
        window.addEventListener('load', (event) => {
            const documentHeight = () => {
                const doc = document.documentElement;
                doc.style.setProperty('--doc-height', `${window.innerHeight}px`);
            }
            window.addEventListener('resize', documentHeight);
            documentHeight();
        });
        window.jg_app_toggle = ()=>{
            $('#root').toggle();
            $('#jg_root').toggle();
        }
        window.jg_reload = ()=>{
            window.location.reload();
        }
    </script>
</body>

</html>
